Export JSON and TSV in IDA search

ProteinsWebTeam · Dec 14, 2023 · c2e4295 · c2e4295
1 parent ab432c9
commit c2e4295
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 55 deletions.
diff --git a/src/components/Entry/DomainArchitectures/Options/index.tsx b/src/components/Entry/DomainArchitectures/Options/index.tsx
@@ -2,21 +2,35 @@ import React from 'react';
 
 import { createSelector } from 'reselect';
 import { connect } from 'react-redux';
+import { format } from 'url';
 
+import descriptionToPath from 'utils/processDescription/descriptionToPath';
 import { changeSettingsRaw } from 'actions/creators';
 import Tooltip from 'components/SimpleCommonComponents/Tooltip';
 import ToggleSwitch from 'components/ToggleSwitch';
+import Exporter from 'components/Table/Exporter';
+import APIViewButton from 'components/Table/Exporter/APIViewButton';
+import AllIDADownload from './AllIDADownload';
 
 import cssBinder from 'styles/cssBinder';
+
+import exporterStyle from 'components/Table/Exporter/style.css';
 import local from './style.css';
 
-const css = cssBinder(local);
+const css = cssBinder(local, exporterStyle);
 
 type PropsIDAOptions = {
   changeSettingsRaw: typeof changeSettingsRaw;
   idaAccessionDB: string;
+  api?: ParsedURLServer;
+  search?: Record<string, string | boolean>;
 };
-const IDAOptions = ({ changeSettingsRaw, idaAccessionDB }: PropsIDAOptions) => {
+const IDAOptions = ({
+  changeSettingsRaw,
+  idaAccessionDB,
+  api,
+  search,
+}: PropsIDAOptions) => {
   const toggleDomainEntry = () => {
     changeSettingsRaw(
       'ui',
@@ -44,12 +58,53 @@ const IDAOptions = ({ changeSettingsRaw, idaAccessionDB }: PropsIDAOptions) => {
           </Tooltip>
         </label>
       </div>
+      {search && (
+        <Exporter>
+          <div className={css('menu-grid')}>
+            <label htmlFor="json">JSON</label>
+            <AllIDADownload
+              search={search as Record<string, string>}
+              count={10}
+              fileType="json"
+            />
+            <label htmlFor="json">TSV</label>
+            <AllIDADownload
+              search={search as Record<string, string>}
+              count={10}
+              fileType="tsv"
+            />
+            <label htmlFor="api">API</label>
+            {api && <APIViewButton url={getAPIURL(api, search)} />}
+          </div>
+        </Exporter>
+      )}
     </nav>
   );
 };
+const getAPIURL = (
+  { protocol, hostname, port, root }: ParsedURLServer,
+  search: Record<string, string | boolean>,
+) => {
+  const description = {
+    main: { key: 'entry' },
+  };
+  // build URL
+  return format({
+    protocol,
+    hostname,
+    port,
+    pathname: root + descriptionToPath(description),
+    query: search,
+  });
+};
+
 const mapStateToProps = createSelector(
+  (state: GlobalState) => state.settings.api,
+  (state: GlobalState) => state.customLocation.search,
   (state: GlobalState) => state.settings.ui,
-  ({ idaAccessionDB }) => ({
+  (api, search, { idaAccessionDB }) => ({
+    api,
+    search,
     idaAccessionDB,
   }),
 );

diff --git a/src/components/Matches/style.css b/src/components/Matches/style.css
@@ -78,13 +78,3 @@
 .exact {
   background-color: var(--colors-marktext);
 }
-
-.exporter-link a {
-  display: flex;
-  align-items: center;
-  padding: 0.3rem 1rem;
-  & span.file-label {
-    min-width: 10em;
-    color: var(--colors-gray);
-  }
-}
diff --git a/src/components/Table/Exporter/style.css b/src/components/Table/Exporter/style.css
@@ -1,4 +1,4 @@
-@import '../../../styles/colors.css';
+@import "../../../styles/colors.css";
 
 .exporter {
   margin: 0 0 0 0.5rem;
@@ -33,3 +33,16 @@
     }
   }
 }
+
+body a.generate-button,
+body a:visited.generate-button,
+body div.generate-button,
+body button.generate-button {
+  font-size: 0.8rem;
+  box-shadow: none;
+  color: var(--colors-graydark);
+}
+
+span.file-label {
+  color: var(--colors-gray);
+}
diff --git a/src/subPages/SimilarProteins/Table/AllProteinDownload/index.tsx b/src/subPages/SimilarProteins/Table/AllProteinDownload/index.tsx
@@ -4,9 +4,9 @@ import { SupportedExtensions } from 'components/File/FileButton';
 
 import cssBinder from 'styles/cssBinder';
 
-import local from './style.css';
+import exporterStyle from 'components/Table/Exporter/style.css';
 
-const css = cssBinder(local);
+const css = cssBinder(exporterStyle);
 type Props = {
   description: InterProDescription;
   count: number;

diff --git a/src/subPages/SimilarProteins/Table/AllProteinDownload/style.css b/src/subPages/SimilarProteins/Table/AllProteinDownload/style.css
@@ -1,14 +0,0 @@
-body a.generate-button,
-body a:visited.generate-button,
-body div.generate-button,
-body button.generate-button {
-  font-size: 0.8rem;
-  box-shadow: none;
-  color: var(--colors-graydark);
-}
-
-.as-progress-button {
-  width: 3em;
-  height: 3em;
-  padding-top: 1em;
-}

diff --git a/src/subPages/SimilarProteins/Table/index.tsx b/src/subPages/SimilarProteins/Table/index.tsx
@@ -14,6 +14,7 @@ import Link from 'components/generic/Link';
 import Table, { Column, PageSizeSelector, Exporter } from 'components/Table';
 
 import AllProteinDownload from './AllProteinDownload';
+import APIViewButton from 'components/Table/Exporter/APIViewButton';
 
 import cssBinder from 'styles/cssBinder';
 
@@ -132,31 +133,7 @@ const SimilarProteinTable = ({
               fileType="tsv"
             />
             <label htmlFor="api">API</label>
-            <Tooltip title="See the raw response from the InterPro API">
-              <Link
-                target="_blank"
-                href={getAPIURLForSimilarProteins(api, ida, db)}
-                className={css('no-decoration')}
-              >
-                <div
-                  className={css(
-                    'file-button',
-                    'vf-button',
-                    'vf-button--secondary',
-                    'vf-button--sm',
-                    'generate-button',
-                  )}
-                >
-                  <span className={css('as-progress-button')}>
-                    <span
-                      className={css('icon', 'icon-common', 'icon-export')}
-                      data-icon="&#xf233;"
-                    />
-                  </span>{' '}
-                  <span className={css('file-label')}>Web View</span>
-                </div>
-              </Link>
-            </Tooltip>
+            <APIViewButton url={getAPIURLForSimilarProteins(api, ida, db)} />
           </div>
         </Exporter>
 

diff --git a/src/web-workers/download/object2TSV.js b/src/web-workers/download/object2TSV.js
@@ -40,6 +40,15 @@ const locationsToString = (
         )
         .join(',')
     : '';
+const IDADomainsToString = (domains) =>
+  domains
+    ? domains
+        .map(
+          ({ accession, name, coordinates }) =>
+            `${accession}(${name})[${coordinates[0].fragments[0].start}-${coordinates[0].fragments[0].end}]`,
+        )
+        .join('\t')
+    : '';
 
 export const columns /*: {
   entry: Object,
@@ -147,6 +156,18 @@ export const columns /*: {
     },
     { name: 'Source Database', selector: 'fields.source_database[0]' },
   ],
+  ida: [
+    { name: 'IDA ID', selector: 'ida_id' },
+    { name: 'IDA Text', selector: 'ida' },
+    { name: 'Unique Proteins', selector: 'unique_proteins' },
+    { name: 'Representative Accession', selector: 'representative.accession' },
+    { name: 'Representative Length', selector: 'representative.length' },
+    {
+      name: 'Representative Domains',
+      selector: 'representative.domains',
+      serializer: IDADomainsToString,
+    },
+  ],
 };
 columns.proteinEntry = [
   ...columns.protein,