Skip to content

Commit cc521a0

Browse files
SeanLeRoySeanLeRoy
committed
New download page
1 parent 3437298 commit cc521a0

File tree

5 files changed

+270
-11
lines changed

5 files changed

+270
-11
lines changed

‎packages/core/hooks/useHelpOptions/index.ts

+7-11
Original file line numberDiff line numberDiff line change
@@ -117,17 +117,13 @@ export default function useHelpOptions(
117117
},
118118
},
119119
]),
120-
...(isOnWeb
121-
? []
122-
: [
123-
{
124-
key: "download-newest-version",
125-
text: "Download Newest Version",
126-
title: "Opens the BioFile Finder download page in a new window",
127-
href: "https://alleninstitute.github.io/biofile-finder/",
128-
target: "_blank",
129-
},
130-
]),
120+
{
121+
key: "download-newest-version",
122+
text: "Download Newest Version",
123+
title: "Opens the BioFile Finder download page in a new window",
124+
href: "https://bff.allencell.org/download",
125+
target: "_blank",
126+
},
131127
{
132128
key: "github",
133129
text: `Visit GitHub page`,

‎packages/web/src/components/Download/Download.module.css

Whitespace-only changes.

‎packages/web/src/components/Download/Instructions.tsx

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import * as React from "react";
2+
3+
export enum OS {
4+
WINDOWS = "Windows",
5+
MAC = "Mac",
6+
LINUX = "Linux",
7+
}
8+
9+
interface Props {
10+
os: OS | undefined;
11+
}
12+
13+
/**
14+
* Componenet for rendering OS specific installation instructions for this app
15+
*/
16+
export default function Instructions(props: Props) {
17+
if (props.os === OS.WINDOWS) {
18+
return (
19+
<ul>
20+
<li>Click the &quot;Download&quot; button to the left</li>
21+
<li>
22+
Move the downloaded executable from your Downloads folder to a more durable
23+
location. Note that ITO prevents executables from being stored <i>directly</i>{" "}
24+
on either your Desktop or in your Documents folder. The executable can, however,
25+
be placed within a folder in either location (e.g.{" "}
26+
<code>Desktop\\FMS Explorer\\explorer.exe</code>)
27+
</li>
28+
<li>
29+
<strong>Recommendation:</strong> store the executable in someplace like{" "}
30+
<code>C:\\Users\\someuser\\FMS Explorer\\</code>. Once there, you can
31+
right-click on the .exe and select &quot;Send to&quot; &gt; &quot;Desktop
32+
(create shortcut)&quot; to make it more convenient to find
33+
</li>
34+
<li>
35+
<strong>If on Windows 10:</strong> the <i>first</i> time you run the
36+
application, you&apos;ll see a blue pop-up warning that &quot;Windows protected
37+
your PC.&quot; To continue, click &quot;More Info,&quot; then press the
38+
&quot;Run anyway&quot; button
39+
</li>
40+
</ul>
41+
);
42+
}
43+
44+
if (props.os === OS.MAC) {
45+
return (
46+
<ul>
47+
<li>Click the &quot;Download&quot; button to the left</li>
48+
<li>
49+
<figure className="figure installation-instr">
50+
<img
51+
className="screenshot"
52+
src="resources/macos-open-with-diskimagemounter.png"
53+
/>
54+
<figcaption className="figure-caption">
55+
When prompted by your web browser, select &apos;Open with
56+
DiskImageMounter (default)
57+
</figcaption>
58+
</figure>
59+
</li>
60+
<li>
61+
<figure className="figure installation-instr">
62+
<img
63+
className="screenshot"
64+
src="resources/macos-drag-into-applications.png"
65+
/>
66+
<figcaption className="figure-caption">
67+
Drag and drop the BioFile Finder icon onto the Applications folder icon.
68+
If prompted to &quot;Keep Both,&quot; &quot;Stop,&quot; or
69+
&quot;Replace,&quot; choose &quot;Replace.&quot;
70+
</figcaption>
71+
</figure>
72+
</li>
73+
<li>Open Finder, and locate the BioFile Finder in Applications.</li>
74+
<li>
75+
Right-click on the BioFile Finder, select &qout;Open.&quot;{" "}
76+
<em>You may need to do this twice in order to get to the next step</em>.
77+
</li>
78+
<li>
79+
<figure className="figure installation-instr">
80+
<img className="screenshot" src="resources/macos-open-anyway.png" />
81+
<figcaption className="figure-caption">
82+
You should be prompted with an alert that reads, &quot;macOS cannot
83+
verify the developer of &apos;BioFile Finder&apos;. Are you sure you
84+
want to open it?&quot; Select &quot;Open.&quot;
85+
</figcaption>
86+
</figure>
87+
</li>
88+
<li>
89+
<figure className="figure installation-instr">
90+
<img
91+
className="screenshot"
92+
src="resources/macos-connect-to-fms-storage.png"
93+
/>
94+
<figcaption className="figure-caption">
95+
(Optional) If you&apos;d like to access any of the files found in the
96+
BioFile Finder in a third-party application (e.g., opening an image in
97+
an image viewer), you&apos;ll need to mount FMS storage on your
98+
computer. To do this: <code>Go</code> → <code>Connect to server</code> →
99+
enter <code>smb://allen/programs</code> → <code>Connect</code>.
100+
<strong>
101+
Note! This is only possible when connected to the Allen Institute
102+
network; you will be unable to do this over VPN.
103+
</strong>
104+
</figcaption>
105+
</figure>
106+
</li>
107+
</ul>
108+
);
109+
}
110+
111+
if (props.os === OS.LINUX) {
112+
return (
113+
<ul>
114+
<li>Click the &quot;Download&quot; button to the left</li>
115+
<li>Locate the download in file browser</li>
116+
<li>Right-click the download</li>
117+
<li>Select the &quot;Properties&quot; dropdown option</li>
118+
<li>Click the &quot;Permissions&quot; tab</li>
119+
<li>Ensure &quot;Allow executing file as program&quot; is checked</li>
120+
<li>Click to open as you would any other application</li>
121+
</ul>
122+
);
123+
}
124+
125+
return (
126+
<p>
127+
Sorry, we couldn&apos;t determine your operating system. Please contact software for
128+
assistance.
129+
</p>
130+
);
131+
}

‎packages/web/src/components/Download/index.tsx

+127
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import { uniqueId } from "lodash";
2+
import * as React from "react";
3+
import { useSelector } from "react-redux";
4+
5+
import Instructions, { OS } from "./Instructions";
6+
import { PrimaryButton } from "../../../../core/components/Buttons";
7+
import { interaction } from "../../../../core/state";
8+
9+
import styles from "./Download.module.css";
10+
11+
const REPO = "biofile-finder";
12+
const REPO_OWNER = "AllenInstitute";
13+
14+
const FILE_TYPE_BY_OS = {
15+
[OS.WINDOWS]: "exe",
16+
[OS.MAC]: "dmg",
17+
[OS.LINUX]: "AppImage",
18+
};
19+
20+
interface Asset {
21+
browser_download_url: string;
22+
name: string;
23+
}
24+
25+
interface Release {
26+
assets: Asset[];
27+
created_at: string;
28+
prerelease: boolean;
29+
}
30+
31+
// Determine OS from navigator object
32+
const getOs = (): OS | undefined => {
33+
if (navigator.appVersion.indexOf("Win") !== -1) {
34+
return OS.WINDOWS;
35+
}
36+
if (navigator.appVersion.indexOf("Mac") !== -1) {
37+
return OS.MAC;
38+
}
39+
if (navigator.appVersion.indexOf("Linux") !== -1) {
40+
return OS.LINUX;
41+
}
42+
};
43+
44+
// Grab the latest release from the GitHub API
45+
const getLatestRelease = async (): Promise<Release> => {
46+
const response = await fetch(`https://api.github.com/repos/${REPO_OWNER}/${REPO}/releases`);
47+
if (!response.ok) {
48+
throw Error(response.statusText);
49+
}
50+
const releases: Release[] = await response.json();
51+
const sortedReleases = releases
52+
.filter((release) => !release.prerelease)
53+
.sort((a, b) => b["created_at"].localeCompare(a["created_at"]));
54+
if (sortedReleases.length === 0) {
55+
throw new Error(`No releases found in GitHub ${REPO_OWNER}/${REPO}`);
56+
}
57+
return sortedReleases[0];
58+
};
59+
60+
const getAssetDownloadURL = async (os: OS): Promise<string> => {
61+
const release = await getLatestRelease();
62+
63+
// Find the download link for the appropriate OS
64+
const assets = release?.assets.filter((asset) => asset.name.endsWith(FILE_TYPE_BY_OS[os]));
65+
if (!assets?.length) {
66+
throw new Error("Could not find asset for os in latest releases");
67+
}
68+
return assets[0]["browser_download_url"];
69+
};
70+
71+
/**
72+
* Internal facing page for downloading desktop version of BFF.
73+
*/
74+
export default function Download() {
75+
const [error, setError] = React.useState<string>();
76+
const { fileDownloadService } = useSelector(interaction.selectors.getPlatformDependentServices);
77+
const isAicsEmployee = useSelector(interaction.selectors.isAicsEmployee);
78+
79+
// Only show download button if user is an AICS employee
80+
// should ever get here, but just in case
81+
if (!isAicsEmployee) {
82+
return <p>Unauthorized, BioFile Finder is not available for public download yet.</p>;
83+
}
84+
85+
const os = getOs();
86+
const onDownload = async () => {
87+
if (!os) return;
88+
89+
try {
90+
const downloadURL = await getAssetDownloadURL(os);
91+
await fileDownloadService.download(
92+
{ id: uniqueId(), name: "BioFile Finder", path: downloadURL, data: downloadURL },
93+
uniqueId()
94+
);
95+
setError(undefined);
96+
} catch (error) {
97+
setError((error as Error).message);
98+
}
99+
};
100+
101+
return (
102+
<div className={styles.root}>
103+
{error && (
104+
<div className={styles.section}>
105+
<div className={styles.error}>The following error occurred: {error}</div>
106+
</div>
107+
)}
108+
<div className={styles.section}>
109+
<div className={styles.downloadContainer}>
110+
<PrimaryButton
111+
className={styles.downloadButton}
112+
iconName="Download"
113+
title="Download"
114+
text="Download Latest Version"
115+
disabled={!os}
116+
onClick={onDownload}
117+
/>
118+
</div>
119+
</div>
120+
<div className={styles.section}>
121+
<h2 className={styles.header}>Installation Instructions</h2>
122+
<p>To install the BioFile Finder, follow the OS specific instructions below.</p>
123+
<Instructions os={os} />
124+
</div>
125+
</div>
126+
);
127+
}

‎packages/web/src/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import ExecutionEnvServiceWeb from "./services/ExecutionEnvServiceWeb";
1212
import DatabaseServiceWeb from "./services/DatabaseServiceWeb";
1313
import FileViewerServiceWeb from "./services/FileViewerServiceWeb";
1414
import FileDownloadServiceWeb from "./services/FileDownloadServiceWeb";
15+
import Download from "./components/Download";
1516
import Learn from "./components/Learn";
1617
import Home from "./components/Home";
1718
import Layout from "./components/Layout";
@@ -45,6 +46,10 @@ const router = createBrowserRouter([
4546
path: "datasets",
4647
element: <OpenSourceDatasets />,
4748
},
49+
{
50+
path: "download",
51+
element: <Download />,
52+
},
4853
],
4954
},
5055
]);

0 commit comments

Comments
 (0)