From ca00d23c7250745fffd437f9adf1c26fb4ddd883 Mon Sep 17 00:00:00 2001
From: james hadfield <hadfield.james@gmail.com>
Date: Wed, 5 Jun 2024 15:16:45 +1200
Subject: [PATCH] [link out modal] add nextclade link-out

Most discussion about this functionality has been happening within the
nextclade repo, see <https://github.com/nextstrain/nextclade/pull/1455>
and <https://github.com/nextstrain/nextclade/pull/1460> for a good
summary.
---
 src/components/modal/LinkOutModalContents.jsx | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/src/components/modal/LinkOutModalContents.jsx b/src/components/modal/LinkOutModalContents.jsx
index ef753099e..51857c8ec 100644
--- a/src/components/modal/LinkOutModalContents.jsx
+++ b/src/components/modal/LinkOutModalContents.jsx
@@ -189,6 +189,51 @@ function MicrobeTraceLinkOut() {
 }
 
 
+function NextcladeLinkOut() {
+  const displayName = 'nextclade';
+  const {pathname, origin} = clientDetails();
+  const {showTreeToo} = useSelector((state) => state.controls)
+  const {mainTreeNumTips, rootSequence} = useSelector((state) => state.metadata);
+
+  // All datasets which have a root-sequence (either in-line or sidecar) can theoretically work as Nextclade
+  // datasets. See <https://github.com/nextstrain/nextclade/pull/1455> for more thorough discussion here.
+  // Excessively big trees may be problematic (as Nextclade was designed around smaller reference trees), but
+  // exactly what the threshold is isn't known. Here I use a rather ad-hoc tip-count threshold:
+  const largeTreeWarning = mainTreeNumTips > 4000;
+
+  if (
+    showTreeToo || // Tanglegrams won't work (surprise surprise!)
+    !rootSequence  // Root sequence is required for Nextclade
+  ) {
+    return (
+      <ButtonContainer key={displayName}>
+        <InactiveButton>{displayName}</InactiveButton>
+        <ButtonDescription>
+          {`The current dataset isn't viewable in Nextclade as ${
+            showTreeToo ?
+              "tanglegrams aren't supported." :
+              "this dataset doesn't have a root-sequence (either within the main JSON or as a sidecar JSON)."
+          }`}
+        </ButtonDescription>
+      </ButtonContainer>
+    )
+  }
+
+  const url = `https://clades.nextstrain.org?dataset-json-url=${encodeURIComponent(`${origin}${pathname}`)}`
+  return (
+    <ButtonContainer key={displayName}>
+      <ButtonText href={url} target="_blank" rel="noreferrer noopener">{displayName}</ButtonText>
+      <ButtonDescription>
+        View this data in Nextclade (<a href='https://clades.nextstrain.org' target="_blank" rel="noreferrer noopener">learn more</a>).
+        {largeTreeWarning && (
+          <span>
+            {` Note that large trees such as this may not work in Nextclade!`}
+          </span>
+        )}
+      </ButtonDescription>
+    </ButtonContainer>
+  )
+}
 
 export const LinkOutModalContents = () => {
   return (
@@ -210,6 +255,7 @@ export const LinkOutModalContents = () => {
 
       <TaxoniumLinkOut />
       <MicrobeTraceLinkOut />
+      <NextcladeLinkOut />
 
     </>
   );