(({ wdkService }) =>
Promise.all([
wdkService.getUserDataset(id),
- wdkService.getUserQuotaMetadata(),
wdkService.getUserDatasetFileListing(id),
]).then(
- ([userDataset, userQuotaMetadata, fileListing]) => {
+ ([userDataset, fileListing]) => {
const { shares, dependencies } = userDataset as UserDatasetDetails;
const partiallyTransformedResponse =
- transformVdiResponseToLegacyResponseHelper(
- userDataset,
- userQuotaMetadata
- );
+ transformVdiResponseToLegacyResponseHelper(userDataset);
const transformedResponse = {
...partiallyTransformedResponse,
fileListing,
@@ -693,8 +687,7 @@ type PartialLegacyUserDataset = Omit<
>;
function transformVdiResponseToLegacyResponseHelper(
- ud: UserDatasetDetails | UserDatasetVDI,
- userQuotaMetadata: UserQuotaMetadata
+ ud: UserDatasetDetails | UserDatasetVDI
): PartialLegacyUserDataset {
const {
name,
@@ -709,7 +702,6 @@ function transformVdiResponseToLegacyResponseHelper(
importMessages,
visibility,
} = ud;
- const { quota } = userQuotaMetadata;
return {
owner: owner.firstName + ' ' + owner.lastName,
projects: projectIds ?? [],
@@ -728,7 +720,6 @@ function transformVdiResponseToLegacyResponseHelper(
ownerUserId: owner.userId,
age: Date.now() - Date.parse(created),
id: datasetId,
- percentQuotaUsed: quota.usage / quota.limit,
status,
importMessages: importMessages ?? [],
};
diff --git a/packages/libs/user-datasets/src/lib/Components/Detail/BigwigDatasetDetail.jsx b/packages/libs/user-datasets/src/lib/Components/Detail/BigwigDatasetDetail.jsx
index f9c39c47e1..dbccc3ec6c 100644
--- a/packages/libs/user-datasets/src/lib/Components/Detail/BigwigDatasetDetail.jsx
+++ b/packages/libs/user-datasets/src/lib/Components/Detail/BigwigDatasetDetail.jsx
@@ -1,7 +1,11 @@
import React from 'react';
import Icon from '@veupathdb/wdk-client/lib/Components/Icon/IconAlt';
-import { Mesa, MesaState } from '@veupathdb/coreui/lib/components/Mesa';
+import {
+ AnchoredTooltip,
+ Mesa,
+ MesaState,
+} from '@veupathdb/coreui/lib/components/Mesa';
import { makeClassifier } from '../UserDatasetUtils';
import UserDatasetDetail from './UserDatasetDetail';
@@ -14,6 +18,11 @@ class BigwigDatasetDetail extends UserDatasetDetail {
super(props);
this.renderTracksSection = this.renderTracksSection.bind(this);
this.getTracksTableColumns = this.getTracksTableColumns.bind(this);
+ this.renderCompatibilitySection =
+ this.renderCompatibilitySection.bind(this);
+ this.getCompatibilityStatus = this.getCompatibilityStatus.bind(this);
+ this.getCompatibilityTableColumns =
+ this.getCompatibilityTableColumns.bind(this);
this.state = {
...this.state,
sequenceId: null,
@@ -133,13 +142,135 @@ class BigwigDatasetDetail extends UserDatasetDetail {
);
}
+ /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
+
+ Compatible Table
+
+ -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
+
+ renderCompatibilitySection() {
+ const { userDataset, config, dataNoun } = this.props;
+ const { displayName } = config;
+
+ const compatibilityTableState = MesaState.create({
+ columns: this.getCompatibilityTableColumns(userDataset),
+ rows: userDataset.dependencies,
+ });
+
+ const compatibilityStatus = this.getCompatibilityStatus();
+
+ return (
+
+
+ Use This {dataNoun.singular} in {displayName}
+
+
+
+
+
+
+
+
+
+ {compatibilityStatus}
+
+ );
+ }
+
+ getCompatibilityStatus() {
+ const { userDataset, config, dataNoun } = this.props;
+ const { projectId } = config;
+
+ const { status, projects } = userDataset;
+
+ /**
+ * In VDI, we know a dataset is compatible when the site-specific's install status
+ * indicates a successful install.
+ *
+ * We know a dataset is incompatible when the site-specific's install status
+ * indicates `missing-dependency`
+ */
+ const installStatusForCurrentProject = status.install?.find(
+ (d) => d.projectId === projectId
+ );
+
+ const isTargetingCurrentSite = projects.includes(projectId);
+ const isInstalled = [
+ userDataset.status.import,
+ installStatusForCurrentProject?.metaStatus,
+ installStatusForCurrentProject?.dataStatus,
+ ].every((status) => status === 'complete');
+
+ const isIncompatible =
+ installStatusForCurrentProject?.dataStatus === 'missing-dependency';
+
+ if (!isTargetingCurrentSite || (isTargetingCurrentSite && isIncompatible)) {
+ return (
+ // if projectIds don't match, then we're not installable and thus incompatible
+ // if we're installable but failed due to a missing dependency, we're incompatible
+
+ This {dataNoun.singular.toLowerCase()} is not compatible with{' '}
+ {projectId} .
+
+ );
+ } else if (isInstalled) {
+ return (
+ // if we've installed successfully and we're installable, we're compatible
+
+ This {dataNoun.singular.toLowerCase()} is compatible with{' '}
+ {projectId} . It is installed for use.
+
+ );
+ } else {
+ // instead of attempting to provide very granular messaging for when things are neither
+ // compatible nor incompatible, let's let the dataset page's Status messaging handle this
+ return null;
+ }
+ }
+
+ getCompatibilityTableColumns() {
+ const { userDataset } = this.props;
+ const { projects } = userDataset;
+ return [
+ {
+ key: 'project',
+ name: 'VEuPathDB Website',
+ renderCell() {
+ return projects.join(', ');
+ },
+ },
+ {
+ key: 'resourceDisplayName',
+ name: 'Required Resource',
+ renderCell({ row }) {
+ const { resourceDisplayName } = row;
+ return resourceDisplayName;
+ },
+ },
+ {
+ key: 'resourceVersion',
+ name: 'Required Resource Release',
+ renderCell({ row }) {
+ const { resourceVersion } = row;
+ return resourceVersion;
+ },
+ },
+ ];
+ }
+
// See note in the base class, UserDatasetDetail
/** @return {import("react").ReactNode[]} */
getPageSections() {
- const [headerSection, compatSection, fileSection] = super.getPageSections();
+ const [headerSection, fileSection] = super.getPageSections();
return [
headerSection,
- compatSection,
+ this.renderCompatibilitySection,
this.renderTracksSection,
fileSection,
];
diff --git a/packages/libs/user-datasets/src/lib/Components/Detail/BiomDatasetDetail.jsx b/packages/libs/user-datasets/src/lib/Components/Detail/BiomDatasetDetail.jsx
deleted file mode 100644
index fffcc9662b..0000000000
--- a/packages/libs/user-datasets/src/lib/Components/Detail/BiomDatasetDetail.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Link } from 'react-router-dom';
-
-import UserDatasetDetail from './UserDatasetDetail';
-
-class BiomDatasetDetail extends UserDatasetDetail {
- constructor(props) {
- super(props);
- this.renderEdaLinkout = this.renderEdaLinkout.bind(this);
- }
-
- renderEdaLinkout() {
- const {
- config: { displayName, projectId },
- userDataset: { status },
- edaWorkspaceUrl,
- } = this.props;
-
- const isInstalled =
- status?.import === 'complete' &&
- status?.install?.find((d) => d.projectId === projectId)?.dataStatus ===
- 'complete';
-
- return !isInstalled || !edaWorkspaceUrl ? null : (
-
-
-
-
- );
- }
-
- // See note in the base class, UserDatasetDetail
- /** @return {import("react").ReactNode[]} */
- getPageSections() {
- const [headerSection, , fileSection] = super.getPageSections();
-
- return [headerSection, this.renderEdaLinkout, fileSection];
- }
-}
-
-export default BiomDatasetDetail;
diff --git a/packages/libs/user-datasets/src/lib/Components/Detail/EdaDatasetDetail.jsx b/packages/libs/user-datasets/src/lib/Components/Detail/EdaDatasetDetail.jsx
new file mode 100644
index 0000000000..79fc457cc7
--- /dev/null
+++ b/packages/libs/user-datasets/src/lib/Components/Detail/EdaDatasetDetail.jsx
@@ -0,0 +1,66 @@
+import { Link } from 'react-router-dom';
+
+import UserDatasetDetail from './UserDatasetDetail';
+
+class EdaDatasetDetail extends UserDatasetDetail {
+ constructor(props) {
+ super(props);
+ this.renderEdaLinkout = this.renderEdaLinkout.bind(this);
+ }
+
+ renderEdaLinkout() {
+ const {
+ config: { displayName, projectId },
+ userDataset: { status },
+ edaWorkspaceUrl,
+ edaMapUrl,
+ } = this.props;
+
+ const isInstalled =
+ status?.import === 'complete' &&
+ status?.install?.find((d) => d.projectId === projectId)?.dataStatus ===
+ 'complete';
+
+ if (!isInstalled) return null;
+
+ if (edaWorkspaceUrl == null && edaMapUrl == null) return null;
+
+ return (
+
+ {!edaWorkspaceUrl ? null : (
+
+
+ )}
+ {!edaMapUrl ? null : (
+
+
+ )}
+
+ );
+ }
+
+ getAttributes() {
+ const attributes = super.getAttributes();
+
+ if (!this.isInstalled()) return attributes;
+
+ const edaLinks = {
+ attribute: 'Explore',
+ value: this.renderEdaLinkout(),
+ };
+ const spliceIndex = this.props.includeNameHeader ? 2 : 1;
+ return [
+ ...attributes.slice(0, spliceIndex),
+ edaLinks,
+ ...attributes.slice(spliceIndex),
+ ];
+ }
+}
+
+export default EdaDatasetDetail;
diff --git a/packages/libs/user-datasets/src/lib/Components/Detail/IsaDatasetDetail.jsx b/packages/libs/user-datasets/src/lib/Components/Detail/IsaDatasetDetail.jsx
deleted file mode 100644
index 6dc37df326..0000000000
--- a/packages/libs/user-datasets/src/lib/Components/Detail/IsaDatasetDetail.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { Link } from 'react-router-dom';
-
-import UserDatasetDetail from './UserDatasetDetail';
-
-class IsaDatasetDetail extends UserDatasetDetail {
- constructor(props) {
- super(props);
- this.renderEdaLinkout = this.renderEdaLinkout.bind(this);
- }
-
- renderEdaLinkout() {
- const {
- config: { displayName, projectId },
- userDataset: { status },
- edaWorkspaceUrl,
- edaMapUrl,
- } = this.props;
-
- const isInstalled =
- status?.import === 'complete' &&
- status?.install?.find((d) => d.projectId === projectId)?.dataStatus ===
- 'complete';
-
- if (!isInstalled) return null;
-
- return (
- <>
- {!edaWorkspaceUrl ? null : (
-
-
-
-
- )}
- {!edaMapUrl ? null : (
-
-
-
-
- )}
-
- );
- }
-
- // See note in the base class, UserDatasetDetail
- /** @return {import("react").ReactNode[]} */
- getPageSections() {
- const [headerSection, , fileSection] = super.getPageSections();
-
- return [headerSection, this.renderEdaLinkout, fileSection];
- }
-}
-
-export default IsaDatasetDetail;
diff --git a/packages/libs/user-datasets/src/lib/Components/Detail/UserDatasetDetail.jsx b/packages/libs/user-datasets/src/lib/Components/Detail/UserDatasetDetail.jsx
index 653d1f9ad2..9cd01b6b95 100644
--- a/packages/libs/user-datasets/src/lib/Components/Detail/UserDatasetDetail.jsx
+++ b/packages/libs/user-datasets/src/lib/Components/Detail/UserDatasetDetail.jsx
@@ -4,11 +4,7 @@ import { Public } from '@material-ui/icons';
import Icon from '@veupathdb/wdk-client/lib/Components/Icon/IconAlt';
import SaveableTextEditor from '@veupathdb/wdk-client/lib/Components/InputControls/SaveableTextEditor';
import Link from '@veupathdb/wdk-client/lib/Components/Link';
-import {
- AnchoredTooltip,
- Mesa,
- MesaState,
-} from '@veupathdb/coreui/lib/components/Mesa';
+import { Mesa, MesaState } from '@veupathdb/coreui/lib/components/Mesa';
import { WdkDependenciesContext } from '@veupathdb/wdk-client/lib/Hooks/WdkDependenciesEffect';
import { bytesToHuman } from '@veupathdb/wdk-client/lib/Utils/Converters';
@@ -17,7 +13,7 @@ import NotFound from '@veupathdb/wdk-client/lib/Views/NotFound/NotFound';
import SharingModal from '../Sharing/UserDatasetSharingModal';
import CommunityModal from '../Sharing/UserDatasetCommunityModal';
import UserDatasetStatus from '../UserDatasetStatus';
-import { makeClassifier, normalizePercentage } from '../UserDatasetUtils';
+import { makeClassifier } from '../UserDatasetUtils';
import { ThemedGrantAccessButton } from '../ThemedGrantAccessButton';
import { ThemedDeleteButton } from '../ThemedDeleteButton';
@@ -42,12 +38,6 @@ class UserDatasetDetail extends React.Component {
this.renderHeaderSection = this.renderHeaderSection.bind(this);
this.renderDatasetActions = this.renderDatasetActions.bind(this);
- this.renderCompatibilitySection =
- this.renderCompatibilitySection.bind(this);
- this.getCompatibilityStatus = this.getCompatibilityStatus.bind(this);
- this.getCompatibilityTableColumns =
- this.getCompatibilityTableColumns.bind(this);
-
this.openSharingModal = this.openSharingModal.bind(this);
this.renderFileSection = this.renderFileSection.bind(this);
this.closeSharingModal = this.closeSharingModal.bind(this);
@@ -137,27 +127,24 @@ class UserDatasetDetail extends React.Component {
);
}
+ isInstalled() {
+ const { config } = this.props;
+ const { status } = this.props.userDataset;
+ return (
+ status?.import === 'complete' &&
+ status?.install?.find((d) => d.projectId === config.projectId)
+ ?.dataStatus === 'complete'
+ );
+ }
+
getAttributes() {
- const { userDataset, quotaSize, questionMap, dataNoun, config } =
- this.props;
+ const { userDataset, questionMap, dataNoun } = this.props;
const { onMetaSave } = this;
- const {
- id,
- type,
- meta,
- size,
- percentQuotaUsed,
- owner,
- created,
- sharedWith,
- status,
- } = userDataset;
+ const { id, type, meta, size, owner, created, sharedWith, status } =
+ userDataset;
const { display, name, version } = type;
const isOwner = this.isMyDataset();
- const isInstalled =
- status?.import === 'complete' &&
- status?.install?.find((d) => d.projectId === config.projectId)
- ?.dataStatus === 'complete';
+ const isInstalled = this.isInstalled();
const questions = Object.values(questionMap).filter(
(q) =>
'userDatasetType' in q.properties &&
@@ -191,14 +178,50 @@ class UserDatasetDetail extends React.Component {
/>
),
},
+ !questions || !questions.length || !isInstalled
+ ? null
+ : {
+ attribute: 'Available searches',
+ value: (
+
+ {questions.map((q) => {
+ // User dataset searches typically offer changing the dataset through a dropdown
+ // Ths dropdown is a param, "biom_dataset" on MicrobiomeDB and "rna_seq_dataset" on genomic sites
+ // Hence the regex: /dataset/
+ const ps = q.paramNames.filter((paramName) =>
+ paramName.match(/dataset/)
+ );
+ const urlPath = [
+ '',
+ 'search',
+ q.outputRecordClassName,
+ q.urlSegment,
+ ].join('/');
+ const url =
+ urlPath +
+ (ps.length === 1 ? '?param.' + ps[0] + '=' + id : '');
+ return (
+
+
+ );
+ })}
+
+ ),
+ },
+ {
+ attribute: 'Owner',
+ value: isOwner ? 'Me' : owner,
+ },
{
attribute: 'Visibility',
value:
meta.visibility === 'public' ? (
<>
{' '}
-
{sharedWith.map((share, index) => (
@@ -221,32 +245,6 @@ class UserDatasetDetail extends React.Component {
),
},
- {
- attribute: 'Owner',
- value: isOwner ? 'Me' : owner,
- },
- { attribute: 'ID', value: id },
- {
- attribute: 'Data type',
- value: (
-
- {display} ({name} {version})
-
- ),
- },
- {
- attribute: 'Created',
- value:
- {questions.map((q) => {
- // User dataset searches typically offer changing the dataset through a dropdown
- // Ths dropdown is a param, "biom_dataset" on MicrobiomeDB and "rna_seq_dataset" on genomic sites
- // Hence the regex: /dataset/
- const ps = q.paramNames.filter((paramName) =>
- paramName.match(/dataset/)
- );
- const urlPath = [
- '',
- 'search',
- q.outputRecordClassName,
- q.urlSegment,
- ].join('/');
- const url =
- urlPath +
- (ps.length === 1 ? '?param.' + ps[0] + '=' + id : '');
- return (
-
-
- );
- })}
-
- ),
- },
+ {
+ attribute: 'Created',
+ value:
+ {display} ({name} {version})
+
+ ),
+ },
].filter((attr) => attr);
}
@@ -416,12 +397,12 @@ class UserDatasetDetail extends React.Component {
return (
Data Files
-
+
+
@@ -516,128 +497,6 @@ class UserDatasetDetail extends React.Component {
].filter((column) => column);
}
- /* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
-
- Compatible Table
-
- -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
-
- renderCompatibilitySection() {
- const { userDataset, config, dataNoun } = this.props;
- const { displayName } = config;
-
- const compatibilityTableState = MesaState.create({
- columns: this.getCompatibilityTableColumns(userDataset),
- rows: userDataset.dependencies,
- });
-
- const compatibilityStatus = this.getCompatibilityStatus();
-
- return (
-
-
- Use This {dataNoun.singular} in {displayName}
-
-
-
-
-
-
-
-
-
- {compatibilityStatus}
-
- );
- }
-
- getCompatibilityStatus() {
- const { userDataset, config, dataNoun } = this.props;
- const { projectId } = config;
-
- const { status, projects } = userDataset;
-
- /**
- * In VDI, we know a dataset is compatible when the site-specific's install status
- * indicates a successful install.
- *
- * We know a dataset is incompatible when the site-specific's install status
- * indicates `missing-dependency`
- */
- const installStatusForCurrentProject = status.install?.find(
- (d) => d.projectId === projectId
- );
-
- const isTargetingCurrentSite = projects.includes(projectId);
- const isInstalled = [
- userDataset.status.import,
- installStatusForCurrentProject?.metaStatus,
- installStatusForCurrentProject?.dataStatus,
- ].every((status) => status === 'complete');
-
- const isIncompatible =
- installStatusForCurrentProject?.dataStatus === 'missing-dependency';
-
- if (!isTargetingCurrentSite || (isTargetingCurrentSite && isIncompatible)) {
- return (
- // if projectIds don't match, then we're not installable and thus incompatible
- // if we're installable but failed due to a missing dependency, we're incompatible
-
- This {dataNoun.singular.toLowerCase()} is not compatible with{' '}
- {projectId} .
-
- );
- } else if (isInstalled) {
- return (
- // if we've installed successfully and we're installable, we're compatible
-
- This {dataNoun.singular.toLowerCase()} is compatible with{' '}
- {projectId} . It is installed for use.
-
- );
- } else {
- // instead of attempting to provide very granular messaging for when things are neither
- // compatible nor incompatible, let's let the dataset page's Status messaging handle this
- return null;
- }
- }
-
- getCompatibilityTableColumns() {
- const { userDataset } = this.props;
- const { projects } = userDataset;
- return [
- {
- key: 'project',
- name: 'VEuPathDB Website',
- renderCell() {
- return projects.join(', ');
- },
- },
- {
- key: 'resourceDisplayName',
- name: 'Required Resource',
- renderCell({ row }) {
- const { resourceDisplayName } = row;
- return resourceDisplayName;
- },
- },
- {
- key: 'resourceVersion',
- name: 'Required Resource Release',
- renderCell({ row }) {
- const { resourceVersion } = row;
- return resourceVersion;
- },
- },
- ];
- }
-
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
General Rendering
@@ -650,11 +509,7 @@ class UserDatasetDetail extends React.Component {
// The ReactNode type is better suited, here, since it allows for null values.
/** @return {import("react").ReactNode[]} */
getPageSections() {
- return [
- this.renderHeaderSection,
- this.renderCompatibilitySection,
- this.renderFileSection,
- ];
+ return [this.renderHeaderSection, this.renderFileSection];
}
render() {
diff --git a/packages/libs/user-datasets/src/lib/Components/Detail/UserDatasetDetail.scss b/packages/libs/user-datasets/src/lib/Components/Detail/UserDatasetDetail.scss
index b9fa2c2b3f..8fdce4d0ba 100644
--- a/packages/libs/user-datasets/src/lib/Components/Detail/UserDatasetDetail.scss
+++ b/packages/libs/user-datasets/src/lib/Components/Detail/UserDatasetDetail.scss
@@ -24,8 +24,16 @@
padding: 20px 0;
}
- .UserDatasetDetail-SectionTitle {
- margin-bottom: 10px;
+ h2 {
+ padding: 0;
+ font-size: 1.65em;
+ color: black;
+ }
+ h3 {
+ padding: 0;
+ font-size: 1.3em;
+ margin-top: 1.1em;
+ margin-bottom: 0.5em;
.wdk-Icon {
color: $blue;
margin-right: 10px;
@@ -81,6 +89,14 @@
font-size: 1.4em;
font-weight: 300;
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ a {
+ font-weight: 500;
+ }
+
&.UserDatasetDetail-Name {
font-weight: 400;
font-size: 2.8em;
@@ -100,18 +116,23 @@
}
.UserDatasetDetail-AttributeValue {
flex: 1 1 auto;
+ ul {
+ display: flex;
+ list-style: none;
+ margin: 0;
+ li + li:before {
+ content: '|';
+ margin: 0 1ex;
+ }
+ }
}
}
- .UserDatasetDetail-Owner {
- margin-top: 1em;
- }
- .UserDatasetDetail-Summary {
- margin-top: 2em;
- margin-bottom: 1em;
- flex-direction: column;
- }
- .UserDatasetDetail-Description {
- flex-direction: column;
+ .UserDatasetDetail {
+ &-Owner,
+ &-Summary,
+ &-Created {
+ margin-top: 1em;
+ }
}
}
}
diff --git a/packages/libs/user-datasets/src/lib/Components/UploadForm.tsx b/packages/libs/user-datasets/src/lib/Components/UploadForm.tsx
index 4e0bcbe583..5be92d60cc 100644
--- a/packages/libs/user-datasets/src/lib/Components/UploadForm.tsx
+++ b/packages/libs/user-datasets/src/lib/Components/UploadForm.tsx
@@ -251,7 +251,7 @@ function UploadForm({
datasetUploadType.formConfig.description?.inputProps;
const summaryRequired = summaryInputProps?.required ?? true;
- const descriptionRequired = descriptionInputProps?.required ?? true;
+ const descriptionRequired = descriptionInputProps?.required ?? false;
const defaultFileInputField = (