Skip to content

Commit

Permalink
added hyperlink subsection
Browse files Browse the repository at this point in the history
  • Loading branch information
@asizemore
asizemore committed Mar 6, 2025
1 parent 9518c20 commit 18da2f5
Show file tree
Hide file tree
Showing 3 changed files with 166 additions and 9 deletions.
4 changes: 2 additions & 2 deletions packages/libs/user-datasets/src/lib/Components/UploadForm.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,8 @@
}
& &--NestedInputContainer &--NestedInputFields {
display: grid;
grid-template-columns: 11em 10em;
grid-template-rows: 2.5em 2.5em;
grid-template-columns: 11em 50em;
grid-template-rows: 2.5em 2.5em 2.5em;
align-items: baseline;
padding-left: 2.5em;
margin-bottom: 1em;
Expand Down
169 changes: 163 additions & 6 deletions packages/libs/user-datasets/src/lib/Components/UploadForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
NewUserDataset,
ResultUploadConfig,
UserDataset,
UserDatasetHyperlink,
UserDatasetPublication,
} from '../Utils/types';

Expand Down Expand Up @@ -82,6 +83,7 @@ interface FormContent {
shortAttribution?: string;
category?: string;
publications?: UserDatasetPublication[];
hyperlinks?: UserDatasetHyperlink[];
}

export type FormValidation = InvalidForm | ValidForm;
Expand Down Expand Up @@ -149,11 +151,9 @@ function UploadForm({
const [publications, setPublications] = useState<UserDatasetPublication[]>(
[]
);
const [hyperlinks, setHyperlinks] = useState<UserDatasetHyperlink[]>([]);
const [nPublicationInputBoxes, setNPublicationInputBoxes] = useState(0);

console.log(publications);
console.log(nPublicationInputBoxes);
console.log(Array(nPublicationInputBoxes));
const [nHyperlinkInputBoxes, setNHyperlinkInputBoxes] = useState(0);

// Don't want to really use a ton of state hooks. Instead could get all the info from form data
// Could replace all the useState hooks with one that contains all the properties.
Expand Down Expand Up @@ -257,6 +257,7 @@ function UploadForm({
shortAttribution,
category,
publications,
hyperlinks,
}
);

Expand All @@ -282,6 +283,7 @@ function UploadForm({
shortAttribution,
category,
publications,
hyperlinks,
]
);

Expand Down Expand Up @@ -538,7 +540,6 @@ function UploadForm({
onChange={setCategory}
/>
</div>
{/* Need to add the option to add a publication, because pubs aren't required */}
<div className="additionalDetailsFormSection additionalDetailsFormSection--data-set-publications">
<FieldLabel
htmlFor="data-set-publications-pubMedId"
Expand Down Expand Up @@ -579,7 +580,83 @@ function UploadForm({
})}
<FloatingButton
text="Add Publication"
onPress={() => setNPublicationInputBoxes((n) => n + 1)}
onPress={(event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
setNPublicationInputBoxes((n) => n + 1);
}}
icon={AddIcon}
/>
</div>
<div className="additionalDetailsFormSection additionalDetailsFormSection--data-set-hyperlinks">
<FieldLabel
htmlFor="data-set-publications-hyperlinks"
required={false}
>
Hyperlinks (Optional)
</FieldLabel>
{[...Array(nHyperlinkInputBoxes).keys()].map((index) => {
return (
<HyperlinkInput
n={index}
url={hyperlinks[index]?.url}
onAddUrl={(value: string) => {
const updatedHyperlinks = [...hyperlinks];
updatedHyperlinks[index] = {
url: value,
text: updatedHyperlinks[index]?.text,
description: updatedHyperlinks[index]?.description,
isPublication: updatedHyperlinks[index]?.isPublication,
};
setHyperlinks(updatedHyperlinks);
}}
onRemoveHyperlink={() => {
const updatedHyperlinks = [...hyperlinks];
updatedHyperlinks.splice(index, 1);
setHyperlinks(updatedHyperlinks);
setNHyperlinkInputBoxes((n) => n - 1);
}}
text={hyperlinks[index]?.text}
onAddText={(value: string) => {
const updatedHyperlinks = [...hyperlinks];
updatedHyperlinks[index] = {
url: updatedHyperlinks[index]?.url,
text: value,
description: updatedHyperlinks[index]?.description,
isPublication: updatedHyperlinks[index]?.isPublication,
};
setHyperlinks(updatedHyperlinks);
}}
description={hyperlinks[index]?.description}
onAddDescription={(value: string) => {
const updatedHyperlinks = [...hyperlinks];
updatedHyperlinks[index] = {
url: updatedHyperlinks[index]?.url,
text: updatedHyperlinks[index]?.text,
description: value,
isPublication: updatedHyperlinks[index]?.isPublication,
};
setHyperlinks(updatedHyperlinks);
}}
isPublication={hyperlinks[index]?.isPublication}
onAddIsPublication={(value: boolean) => {
const updatedHyperlinks = [...hyperlinks];
updatedHyperlinks[index] = {
url: updatedHyperlinks[index]?.url,
text: updatedHyperlinks[index]?.text,
description: updatedHyperlinks[index]?.description,
isPublication: value,
};
setHyperlinks(updatedHyperlinks);
}}
/>
);
})}
<FloatingButton
text="Add Hyperlink"
onPress={(event: React.MouseEvent<HTMLButtonElement>) => {
event.preventDefault();
setNHyperlinkInputBoxes((n) => n + 1);
}}
icon={AddIcon}
/>
</div>
Expand Down Expand Up @@ -840,6 +917,86 @@ function PublicationInput(props: PublicationInputProps): JSX.Element {
);
}

// UI for hyperlinks
interface HyperlinkInputProps {
n: number;
url: string;
text: string;
onAddUrl: (value: string) => void;
onAddText: (value: string) => void;
onAddDescription: (value: string) => void;
onAddIsPublication: (value: boolean) => void;
onRemoveHyperlink: (event: React.MouseEvent<HTMLButtonElement>) => void;
description?: string;
isPublication?: boolean;
}

function HyperlinkInput(props: HyperlinkInputProps): JSX.Element {
const {
n,
url,
onAddUrl,
onRemoveHyperlink,
text,
onAddText,
description,
onAddDescription,
isPublication,
onAddIsPublication,
} = props;
return (
<div className={cx('--NestedInputContainer')}>
<div className={cx('--NestedInputTitle')}>
<FieldLabel required={false} style={{ fontSize: '1.2em' }}>
Hyperlink {n + 1}
</FieldLabel>
<FloatingButton
text="Remove"
onPress={onRemoveHyperlink}
icon={Trash}
/>
</div>
<div className={cx('--NestedInputFields')}>
<FieldLabel required>URL</FieldLabel>
<TextBox
type="input"
id={`data-set-hyperlink-url-${n}`}
placeholder="url"
required
value={url}
onChange={onAddUrl}
/>
<FieldLabel required>Text</FieldLabel>
<TextBox
type="input"
id={`data-set-hyperlink-text-${n}`}
placeholder="Text to show for the hyperlink"
value={text}
onChange={onAddText}
/>
<FieldLabel required={false}>Description</FieldLabel>
<TextBox
type="input"
id={`data-set-hyperlink-description-${n}`}
placeholder="Description of the hyperlink"
value={description}
required={false}
onChange={onAddDescription}
/>
<FieldLabel required={false}>Is publication?</FieldLabel>
<TextBox
type="input"
id={`data-set-hyperlink-description-${n}`}
placeholder="Description of the hyperlink"
value={text}
required={false}
onChange={onAddDescription}
/>
</div>
</div>
);
}

function isCompleteDataUploadSelection(
dataUploadSelection: DataUploadSelection
): dataUploadSelection is CompleteDataUploadSelection {
Expand Down
2 changes: 1 addition & 1 deletion packages/libs/user-datasets/src/lib/Utils/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -438,7 +438,7 @@ export interface UserDatasetMeta_VDI {
origin: string;
projects: string[];
dependencies: UserDatasetDependency[];
publications?: UserDatasetPublication[]; // new
publications?: UserDatasetPublication[]; // new, done
hyperlinks?: UserDatasetHyperlink[]; // new
organisms?: string[]; // new
contacts?: UserDatasetContact[]; // new
Expand Down

0 comments on commit 18da2f5

Please # to comment.