From ced307fef34f47c425cb7a73c025bdba743fe74d Mon Sep 17 00:00:00 2001
From: Arthur Hilbert <arthur.hilbert@t-online.de>
Date: Thu, 16 Jun 2022 10:06:22 +0200
Subject: [PATCH 1/9] some download modal refactoring

---
 .../oxalis/view/action-bar/download_modal_view.tsx   | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/action-bar/download_modal_view.tsx b/frontend/javascripts/oxalis/view/action-bar/download_modal_view.tsx
index c80145cc914..164dbfbab52 100644
--- a/frontend/javascripts/oxalis/view/action-bar/download_modal_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/download_modal_view.tsx
@@ -34,7 +34,13 @@ type Props = {
   hasVolumeFallback: boolean;
 };
 
-function Hint({ children, style }: { children: React.ReactNode; style: React.CSSProperties }) {
+export function Hint({
+  children,
+  style,
+}: {
+  children: React.ReactNode;
+  style: React.CSSProperties;
+}) {
   return (
     <div style={{ ...style, fontSize: 12, color: "var(--ant-text-secondary)" }}>{children}</div>
   );
@@ -45,7 +51,7 @@ export async function copyToClipboard(code: string) {
   Toast.success("Snippet copied to clipboard.");
 }
 
-function MoreInfoHint() {
+export function MoreInfoHint() {
   return (
     <Hint
       style={{
@@ -65,7 +71,7 @@ function MoreInfoHint() {
   );
 }
 
-function CopyableCodeSnippet({ code, onCopy }: { code: string; onCopy?: () => void }) {
+export function CopyableCodeSnippet({ code, onCopy }: { code: string; onCopy?: () => void }) {
   return (
     <pre>
       <Button

From cc645945514d49b5f663a1cc079b3a072a7d6fc9 Mon Sep 17 00:00:00 2001
From: Arthur Hilbert <arthur.hilbert@t-online.de>
Date: Thu, 16 Jun 2022 10:07:30 +0200
Subject: [PATCH 2/9] add python modal visibility action

---
 frontend/javascripts/oxalis/default_state.ts      |  1 +
 .../oxalis/model/actions/ui_actions.ts            | 15 +++++++++++----
 .../oxalis/model/reducers/ui_reducer.ts           |  4 ++++
 frontend/javascripts/oxalis/store.ts              |  1 +
 .../view/action-bar/tracing_actions_view.tsx      |  2 +-
 .../view/action-bar/view_dataset_actions_view.tsx |  5 ++++-
 6 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/frontend/javascripts/oxalis/default_state.ts b/frontend/javascripts/oxalis/default_state.ts
index 21f968ab050..9905e079d8c 100644
--- a/frontend/javascripts/oxalis/default_state.ts
+++ b/frontend/javascripts/oxalis/default_state.ts
@@ -203,6 +203,7 @@ const defaultState: OxalisState = {
     showDropzoneModal: false,
     showVersionRestore: false,
     showDownloadModal: false,
+    showPythonClientModal: false,
     showShareModal: false,
     storedLayouts: {},
     isImportingMesh: false,
diff --git a/frontend/javascripts/oxalis/model/actions/ui_actions.ts b/frontend/javascripts/oxalis/model/actions/ui_actions.ts
index ba98baea7d0..025d8f33b96 100644
--- a/frontend/javascripts/oxalis/model/actions/ui_actions.ts
+++ b/frontend/javascripts/oxalis/model/actions/ui_actions.ts
@@ -46,12 +46,14 @@ type SetThemeAction = {
   type: "SET_THEME";
   value: Theme;
 };
-
 type SetDownloadModalVisibilityAction = {
   type: "SET_DOWNLOAD_MODAL_VISIBILITY";
   visible: boolean;
 };
-
+type SetPythonClientModalVisibilityAction = {
+  type: "SET_PYTHON_MODAL_VISIBILITY";
+  visible: boolean;
+};
 type SetShareModalVisibilityAction = {
   type: "SET_SHARE_MODAL_VISIBILITY";
   visible: boolean;
@@ -68,6 +70,7 @@ export type UiAction =
   | CycleToolAction
   | SetThemeAction
   | SetDownloadModalVisibilityAction
+  | SetPythonClientModalVisibilityAction
   | SetShareModalVisibilityAction
   | SetBusyBlockingInfoAction;
 export const setDropzoneModalVisibilityAction = (
@@ -117,14 +120,18 @@ export const setThemeAction = (value: Theme): SetThemeAction => ({
   type: "SET_THEME",
   value,
 });
-
 export const setDownloadModalVisibilityAction = (
   visible: boolean,
 ): SetDownloadModalVisibilityAction => ({
   type: "SET_DOWNLOAD_MODAL_VISIBILITY",
   visible,
 });
-
+export const setPythonClientModalVisibilityAction = (
+  visible: boolean,
+): SetPythonClientModalVisibilityAction => ({
+  type: "SET_PYTHON_MODAL_VISIBILITY",
+  visible,
+});
 export const setShareModalVisibilityAction = (visible: boolean): SetShareModalVisibilityAction => ({
   type: "SET_SHARE_MODAL_VISIBILITY",
   visible,
diff --git a/frontend/javascripts/oxalis/model/reducers/ui_reducer.ts b/frontend/javascripts/oxalis/model/reducers/ui_reducer.ts
index 47d90f3d544..3d5f226298f 100644
--- a/frontend/javascripts/oxalis/model/reducers/ui_reducer.ts
+++ b/frontend/javascripts/oxalis/model/reducers/ui_reducer.ts
@@ -82,6 +82,10 @@ function UiReducer(state: OxalisState, action: Action): OxalisState {
       return updateKey(state, "uiInformation", { showDownloadModal: action.visible });
     }
 
+    case "SET_PYTHON_MODAL_VISIBILITY": {
+      return updateKey(state, "uiInformation", { showPythonClientModal: action.visible });
+    }
+
     case "SET_SHARE_MODAL_VISIBILITY": {
       return updateKey(state, "uiInformation", {
         showShareModal: action.visible,
diff --git a/frontend/javascripts/oxalis/store.ts b/frontend/javascripts/oxalis/store.ts
index a5bdf338331..44a13c9a074 100644
--- a/frontend/javascripts/oxalis/store.ts
+++ b/frontend/javascripts/oxalis/store.ts
@@ -444,6 +444,7 @@ type UiInformation = {
   readonly showDropzoneModal: boolean;
   readonly showVersionRestore: boolean;
   readonly showDownloadModal: boolean;
+  readonly showPythonClientModal: boolean;
   readonly showShareModal: boolean;
   readonly activeTool: AnnotationTool;
   readonly storedLayouts: Record<string, any>;
diff --git a/frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.tsx b/frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.tsx
index 13848e8b4d7..caefa63de6a 100644
--- a/frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/tracing_actions_view.tsx
@@ -83,8 +83,8 @@ type StateProps = {
   task: Task | null | undefined;
   activeUser: APIUser | null | undefined;
   hasTracing: boolean;
-  isShareModalOpen: boolean;
   isDownloadModalOpen: boolean;
+  isShareModalOpen: boolean;
   busyBlockingInfo: BusyBlockingInfo;
 };
 type Props = OwnProps & StateProps;
diff --git a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx b/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
index 311efad06f5..a12895f25c2 100644
--- a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
@@ -4,7 +4,10 @@ import { ShareAltOutlined, DownOutlined, CameraOutlined } from "@ant-design/icon
 import ButtonComponent from "oxalis/view/components/button_component";
 import ShareViewDatasetModalView from "oxalis/view/action-bar/share_view_dataset_modal_view";
 import { downloadScreenshot } from "oxalis/view/rendering_utils";
-import { setShareModalVisibilityAction } from "oxalis/model/actions/ui_actions";
+import {
+  setPythonClientModalVisibilityAction,
+  setShareModalVisibilityAction,
+} from "oxalis/model/actions/ui_actions";
 import Store from "oxalis/store";
 
 type Props = {

From e0cdf476f004099a7d892f18ca8b268ef5a18e7b Mon Sep 17 00:00:00 2001
From: Arthur Hilbert <arthur.hilbert@t-online.de>
Date: Thu, 16 Jun 2022 10:08:06 +0200
Subject: [PATCH 3/9] add pythonClientModal to dataset actions

---
 .../action-bar/python_client_modal_view.tsx   | 107 ++++++++++++++++++
 .../action-bar/view_dataset_actions_view.tsx  |  20 +++-
 2 files changed, 124 insertions(+), 3 deletions(-)
 create mode 100644 frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx

diff --git a/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx b/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx
new file mode 100644
index 00000000000..4cb1f2ce57b
--- /dev/null
+++ b/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx
@@ -0,0 +1,107 @@
+import { Divider, Modal, Row, Typography } from "antd";
+import React from "react";
+import { useFetch } from "libs/react_helpers";
+import Toast from "libs/toast";
+import messages from "messages";
+import { getAuthToken } from "admin/admin_rest_api";
+import { useSelector } from "react-redux";
+import type { OxalisState } from "oxalis/store";
+import { CopyableCodeSnippet, MoreInfoHint } from "./download_modal_view";
+const { Paragraph, Text } = Typography;
+type Props = {
+  onClose: () => void;
+};
+
+export default function PythonClientModalView(props: Props): JSX.Element {
+  const { onClose } = props;
+  const isPythonClientModalOpen = useSelector(
+    (state: OxalisState) => state.uiInformation.showPythonClientModal
+  );
+  const activeUser = useSelector((state: OxalisState) => state.activeUser);
+  const dataset = useSelector((state: OxalisState) => state.dataset);
+
+  const maybeShowWarning = () => (
+    <Row>
+      <Text
+        style={{
+          margin: "0 6px 12px",
+        }}
+        type="warning"
+      >
+        {activeUser != null
+          ? messages["annotation.python_do_not_share"]
+          : messages["annotation.register_for_token"]}
+      </Text>
+    </Row>
+  );
+
+  const authToken = useFetch(
+    async () => {
+      if (activeUser != null) {
+        return getAuthToken();
+      }
+      return null;
+    },
+    "loading...",
+    [activeUser],
+  );
+  const wkInitSnippet = `import webknossos as wk
+
+with wk.webknossos_context(token="${authToken || "<insert token here>"}"):
+dataset = wk.Dataset.download(
+    url="${window.location.origin}",
+    dataset="${dataset.name}"
+    organization_id="${dataset.owningOrganization}",
+)
+`;
+
+  const alertTokenIsPrivate = () => {
+    Toast.warning(
+      "The clipboard contains private data. Do not share this information with anyone you do not trust!",
+    );
+  };
+
+  return (
+    <Modal
+      title="Python Client"
+      visible={isPythonClientModalOpen}
+      width={600}
+      footer={null}
+      onCancel={onClose}
+      style={{ overflow: "visible" }}
+    >
+      <Row>
+        <Text
+          style={{
+            margin: "0 6px 12px",
+          }}
+        >
+          The following code snippets are suggestions to get you started quickly with the{" "}
+          <a href="https://docs.webknossos.org/webknossos-py/" target="_blank" rel="noreferrer">
+            webKnossos Python API
+          </a>
+          . To download and use this annotation in your Python project, simply copy and paste the
+          code snippets to your script.
+        </Text>
+      </Row>
+      <Divider
+        style={{
+          margin: "18px 0",
+        }}
+      >
+        Code Snippets
+      </Divider>
+      {maybeShowWarning()}
+      <Paragraph>
+        <CopyableCodeSnippet code="pip install webknossos" />
+        <CopyableCodeSnippet code={wkInitSnippet} onCopy={alertTokenIsPrivate} />
+      </Paragraph>
+      <Divider
+        style={{
+          margin: "18px 0",
+        }}
+      />
+      <MoreInfoHint />
+    </Modal>
+  );
+}
diff --git a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx b/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
index a12895f25c2..d9dcd474e4b 100644
--- a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Dropdown, Menu } from "antd";
-import { ShareAltOutlined, DownOutlined, CameraOutlined } from "@ant-design/icons";
+import { ShareAltOutlined, DownOutlined, CameraOutlined, CodeOutlined } from "@ant-design/icons";
 import ButtonComponent from "oxalis/view/components/button_component";
 import ShareViewDatasetModalView from "oxalis/view/action-bar/share_view_dataset_modal_view";
 import { downloadScreenshot } from "oxalis/view/rendering_utils";
@@ -9,6 +9,7 @@ import {
   setShareModalVisibilityAction,
 } from "oxalis/model/actions/ui_actions";
 import Store from "oxalis/store";
+import PythonClientModalView from "./python_client_modal_view";
 
 type Props = {
   layoutMenu: React.ReactNode;
@@ -20,9 +21,14 @@ export const screenshotMenuItem = (
   </Menu.Item>
 );
 export default function ViewDatasetActionsView(props: Props) {
-  const modal = (
+  const shareDatasetModal = (
     <ShareViewDatasetModalView onOk={() => Store.dispatch(setShareModalVisibilityAction(false))} />
   );
+  const pythonClientModal = (
+    <PythonClientModalView
+      onClose={() => Store.dispatch(setPythonClientModalVisibilityAction(false))}
+    />
+  );
   const overlayMenu = (
     <Menu>
       <Menu.Item
@@ -33,6 +39,13 @@ export default function ViewDatasetActionsView(props: Props) {
         Share
       </Menu.Item>
       {screenshotMenuItem}
+      <Menu.Item
+        key="python-client-button"
+        onClick={() => Store.dispatch(setPythonClientModalVisibilityAction(true))}
+      >
+        <CodeOutlined />
+        Python Client
+      </Menu.Item>
       {props.layoutMenu}
     </Menu>
   );
@@ -42,7 +55,8 @@ export default function ViewDatasetActionsView(props: Props) {
         marginLeft: 10,
       }}
     >
-      {modal}
+      {shareDatasetModal}
+      {pythonClientModal}
       <Dropdown overlay={overlayMenu} trigger={["click"]}>
         <ButtonComponent
           style={{

From 0ab89b055b4ca2778913e619fff26d746b877692 Mon Sep 17 00:00:00 2001
From: Arthur Hilbert <arthur.hilbert@t-online.de>
Date: Thu, 16 Jun 2022 10:19:23 +0200
Subject: [PATCH 4/9] prettyfication

---
 .../oxalis/view/action-bar/python_client_modal_view.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx b/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx
index 4cb1f2ce57b..50e81654faa 100644
--- a/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx
@@ -15,7 +15,7 @@ type Props = {
 export default function PythonClientModalView(props: Props): JSX.Element {
   const { onClose } = props;
   const isPythonClientModalOpen = useSelector(
-    (state: OxalisState) => state.uiInformation.showPythonClientModal
+    (state: OxalisState) => state.uiInformation.showPythonClientModal,
   );
   const activeUser = useSelector((state: OxalisState) => state.activeUser);
   const dataset = useSelector((state: OxalisState) => state.dataset);

From 9f3deaa0ba5f82b4f5f1487339f3d965dceef704 Mon Sep 17 00:00:00 2001
From: Arthur Hilbert <arthur.hilbert@t-online.de>
Date: Thu, 16 Jun 2022 14:31:24 +0200
Subject: [PATCH 5/9] make modal lazy

---
 .../view/action-bar/python_client_modal_view.tsx  | 15 ++++++++-------
 .../view/action-bar/view_dataset_actions_view.tsx |  7 ++++++-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx b/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx
index 50e81654faa..ef958cd49f4 100644
--- a/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx
@@ -1,6 +1,6 @@
 import { Divider, Modal, Row, Typography } from "antd";
 import React from "react";
-import { useFetch } from "libs/react_helpers";
+import { useFetch, makeComponentLazy } from "libs/react_helpers";
 import Toast from "libs/toast";
 import messages from "messages";
 import { getAuthToken } from "admin/admin_rest_api";
@@ -9,14 +9,12 @@ import type { OxalisState } from "oxalis/store";
 import { CopyableCodeSnippet, MoreInfoHint } from "./download_modal_view";
 const { Paragraph, Text } = Typography;
 type Props = {
+  isVisible: boolean;
   onClose: () => void;
 };
 
-export default function PythonClientModalView(props: Props): JSX.Element {
-  const { onClose } = props;
-  const isPythonClientModalOpen = useSelector(
-    (state: OxalisState) => state.uiInformation.showPythonClientModal,
-  );
+function _PythonClientModalView(props: Props): JSX.Element {
+  const { isVisible, onClose } = props;
   const activeUser = useSelector((state: OxalisState) => state.activeUser);
   const dataset = useSelector((state: OxalisState) => state.dataset);
 
@@ -64,7 +62,7 @@ dataset = wk.Dataset.download(
   return (
     <Modal
       title="Python Client"
-      visible={isPythonClientModalOpen}
+      visible={isVisible}
       width={600}
       footer={null}
       onCancel={onClose}
@@ -105,3 +103,6 @@ dataset = wk.Dataset.download(
     </Modal>
   );
 }
+
+const PythonClientModalView = makeComponentLazy(_PythonClientModalView);
+export default PythonClientModalView;
diff --git a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx b/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
index d9dcd474e4b..0d4b3a4a30e 100644
--- a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useSelector } from "react-redux";
 import { Dropdown, Menu } from "antd";
 import { ShareAltOutlined, DownOutlined, CameraOutlined, CodeOutlined } from "@ant-design/icons";
 import ButtonComponent from "oxalis/view/components/button_component";
@@ -8,7 +9,7 @@ import {
   setPythonClientModalVisibilityAction,
   setShareModalVisibilityAction,
 } from "oxalis/model/actions/ui_actions";
-import Store from "oxalis/store";
+import Store, { OxalisState } from "oxalis/store";
 import PythonClientModalView from "./python_client_modal_view";
 
 type Props = {
@@ -21,11 +22,15 @@ export const screenshotMenuItem = (
   </Menu.Item>
 );
 export default function ViewDatasetActionsView(props: Props) {
+  const isPythonClientModalOpen = useSelector(
+    (state: OxalisState) => state.uiInformation.showPythonClientModal,
+  );
   const shareDatasetModal = (
     <ShareViewDatasetModalView onOk={() => Store.dispatch(setShareModalVisibilityAction(false))} />
   );
   const pythonClientModal = (
     <PythonClientModalView
+      isVisible={isPythonClientModalOpen}
       onClose={() => Store.dispatch(setPythonClientModalVisibilityAction(false))}
     />
   );

From e5bd33145cb340d85d9d2f5f26bc239ec56d66ca Mon Sep 17 00:00:00 2001
From: Arthur Hilbert <arthur.hilbert@t-online.de>
Date: Thu, 16 Jun 2022 14:35:38 +0200
Subject: [PATCH 6/9] make share modal lazy

---
 .../action-bar/share_view_dataset_modal_view.tsx     | 12 ++++++++----
 .../view/action-bar/view_dataset_actions_view.tsx    |  6 +++++-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/action-bar/share_view_dataset_modal_view.tsx b/frontend/javascripts/oxalis/view/action-bar/share_view_dataset_modal_view.tsx
index 5b9698a77d5..cda23e6cf06 100644
--- a/frontend/javascripts/oxalis/view/action-bar/share_view_dataset_modal_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/share_view_dataset_modal_view.tsx
@@ -2,6 +2,7 @@ import { CopyOutlined } from "@ant-design/icons";
 import { Modal, Input, Button, Row, Col } from "antd";
 import { useSelector } from "react-redux";
 import React from "react";
+import { makeComponentLazy } from "libs/react_helpers";
 import messages from "messages";
 import { OxalisState } from "oxalis/store";
 import { useDatasetSharingToken, getUrl, copyUrlToClipboard } from "./share_modal_view";
@@ -9,19 +10,19 @@ import { useDatasetSharingToken, getUrl, copyUrlToClipboard } from "./share_moda
 const sharingActiveNode = false;
 
 type Props = {
+  isVisible: boolean;
   onOk: () => any;
 };
 
-export default function ShareViewDatasetModalView(props: Props) {
-  const { onOk } = props;
+function _ShareViewDatasetModalView(props: Props) {
+  const { isVisible, onOk } = props;
   const dataset = useSelector((state: OxalisState) => state.dataset);
-  const isShareModalOpen = useSelector((state: OxalisState) => state.uiInformation.showShareModal);
   const sharingToken = useDatasetSharingToken(dataset);
   const url = getUrl(sharingToken, !dataset.isPublic);
   return (
     <Modal
       title="Share this Dataset"
-      visible={isShareModalOpen}
+      visible={isVisible}
       width={800}
       okText="Ok"
       onOk={onOk}
@@ -71,3 +72,6 @@ export default function ShareViewDatasetModalView(props: Props) {
     </Modal>
   );
 }
+
+const ShareViewDatasetModalView = makeComponentLazy(_ShareViewDatasetModalView);
+export default ShareViewDatasetModalView;
diff --git a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx b/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
index 0d4b3a4a30e..1ae2973919f 100644
--- a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
@@ -22,11 +22,15 @@ export const screenshotMenuItem = (
   </Menu.Item>
 );
 export default function ViewDatasetActionsView(props: Props) {
+  const isShareModalOpen = useSelector((state: OxalisState) => state.uiInformation.showShareModal);
   const isPythonClientModalOpen = useSelector(
     (state: OxalisState) => state.uiInformation.showPythonClientModal,
   );
   const shareDatasetModal = (
-    <ShareViewDatasetModalView onOk={() => Store.dispatch(setShareModalVisibilityAction(false))} />
+    <ShareViewDatasetModalView
+      isVisible={isShareModalOpen}
+      onOk={() => Store.dispatch(setShareModalVisibilityAction(false))}
+    />
   );
   const pythonClientModal = (
     <PythonClientModalView

From b0869baf2dbd1161398e4f41038a1d3324294fd4 Mon Sep 17 00:00:00 2001
From: Philipp Otto <philippotto@users.noreply.github.com>
Date: Mon, 20 Jun 2022 10:49:56 +0200
Subject: [PATCH 7/9] Update
 frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx

---
 .../oxalis/view/action-bar/view_dataset_actions_view.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx b/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
index 1ae2973919f..33a656107a5 100644
--- a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
@@ -53,7 +53,7 @@ export default function ViewDatasetActionsView(props: Props) {
         onClick={() => Store.dispatch(setPythonClientModalVisibilityAction(true))}
       >
         <CodeOutlined />
-        Python Client
+        Download
       </Menu.Item>
       {props.layoutMenu}
     </Menu>

From ffacd54d8c981f83096ff25533acce301348f855 Mon Sep 17 00:00:00 2001
From: Philipp Otto <philipp.4096@googlemail.com>
Date: Mon, 20 Jun 2022 11:05:22 +0200
Subject: [PATCH 8/9] also suggest open_remote in export dialog; update
 changelog

---
 CHANGELOG.unreleased.md                       |  1 +
 .../action-bar/python_client_modal_view.tsx   | 22 +++++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index 50a58aa1390..0a75405c139 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 ### Added
 
 - Added a warning for when the resolution in the XY viewport on z=1-downsampled datasets becomes too low, explaining the problem and how to mitigate it. [#6255](https://github.com/scalableminds/webknossos/pull/6255)
+- Provide a UI to download/export a dataset in view-mode. The UI explains how to access the data with the python library. [#6283](https://github.com/scalableminds/webknossos/pull/6283)
 
 ### Changed
 
diff --git a/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx b/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx
index ef958cd49f4..aa84d5af542 100644
--- a/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx
@@ -46,11 +46,19 @@ function _PythonClientModalView(props: Props): JSX.Element {
   const wkInitSnippet = `import webknossos as wk
 
 with wk.webknossos_context(token="${authToken || "<insert token here>"}"):
-dataset = wk.Dataset.download(
-    url="${window.location.origin}",
-    dataset="${dataset.name}"
-    organization_id="${dataset.owningOrganization}",
-)
+    # Download the dataset.
+    dataset = wk.Dataset.download(
+        url="${window.location.origin}",
+        dataset="${dataset.name}"
+        organization_id="${dataset.owningOrganization}",
+    )
+    # Alternatively, directly open the dataset. Image data will be
+    # streamed when being accessed.
+    remote_dataset = wk.Dataset.open_remote(
+        url="${window.location.origin}",
+        dataset="${dataset.name}"
+        organization_id="${dataset.owningOrganization}",
+    )
 `;
 
   const alertTokenIsPrivate = () => {
@@ -78,8 +86,8 @@ dataset = wk.Dataset.download(
           <a href="https://docs.webknossos.org/webknossos-py/" target="_blank" rel="noreferrer">
             webKnossos Python API
           </a>
-          . To download and use this annotation in your Python project, simply copy and paste the
-          code snippets to your script.
+          . To download and use this dataset in your Python project, simply copy and paste the code
+          snippets to your script.
         </Text>
       </Row>
       <Divider

From 7c2ccd8f0d0178bc4a65747d3e2b10e8aa29d34a Mon Sep 17 00:00:00 2001
From: Philipp Otto <philipp.4096@googlemail.com>
Date: Mon, 20 Jun 2022 11:10:50 +0200
Subject: [PATCH 9/9] small visual tweaks

---
 .../oxalis/view/action-bar/python_client_modal_view.tsx  | 2 +-
 .../oxalis/view/action-bar/view_dataset_actions_view.tsx | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx b/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx
index aa84d5af542..cf9fe0f70a9 100644
--- a/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/python_client_modal_view.tsx
@@ -71,7 +71,7 @@ with wk.webknossos_context(token="${authToken || "<insert token here>"}"):
     <Modal
       title="Python Client"
       visible={isVisible}
-      width={600}
+      width={800}
       footer={null}
       onCancel={onClose}
       style={{ overflow: "visible" }}
diff --git a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx b/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
index 33a656107a5..13b44ccb36c 100644
--- a/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
+++ b/frontend/javascripts/oxalis/view/action-bar/view_dataset_actions_view.tsx
@@ -1,7 +1,12 @@
 import React from "react";
 import { useSelector } from "react-redux";
 import { Dropdown, Menu } from "antd";
-import { ShareAltOutlined, DownOutlined, CameraOutlined, CodeOutlined } from "@ant-design/icons";
+import {
+  ShareAltOutlined,
+  DownOutlined,
+  CameraOutlined,
+  DownloadOutlined,
+} from "@ant-design/icons";
 import ButtonComponent from "oxalis/view/components/button_component";
 import ShareViewDatasetModalView from "oxalis/view/action-bar/share_view_dataset_modal_view";
 import { downloadScreenshot } from "oxalis/view/rendering_utils";
@@ -52,7 +57,7 @@ export default function ViewDatasetActionsView(props: Props) {
         key="python-client-button"
         onClick={() => Store.dispatch(setPythonClientModalVisibilityAction(true))}
       >
-        <CodeOutlined />
+        <DownloadOutlined />
         Download
       </Menu.Item>
       {props.layoutMenu}