Added more drawings for empty dashboards (#7008)

* added first version of empty list icons / drawings for dashboard * applied more styling feedback * more styling * added empty placeholder view for datasets dashboard * changelog * fix an issue with empty dataset folders * fix issues for new organization with no datasets yet * Update frontend/javascripts/dashboard/dataset_folder_view.tsx Co-authored-by: Philipp Otto <[email protected]> --------- Co-authored-by: Philipp Otto <[email protected]>
scalableminds · Jun 21, 2023 · 19315c2 · 19315c2
1 parent c8a8264
commit 19315c2
Show file tree

Hide file tree

Showing 13 changed files with 730 additions and 150 deletions.
diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -17,6 +17,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Added an index structure for volume annotation segments, in preparation for per-segment statistics. [#7063](https://github.com/scalableminds/webknossos/pull/7063)
 - Instead of showing all possible action items next to each other, there is now an overflow menu for layer actions. [#7123](https://github.com/scalableminds/webknossos/pull/7123)
 - In order to facilitate changing the brush size in the brush tool, buttons with preset brush sizes were added. These presets are user configurable by assigning the current brush size to any of the preset buttons. Additionally the preset brush sizes can be set with keyboard shortcuts. [#7101](https://github.com/scalableminds/webknossos/pull/7101)
+- Added new graphics and restyled empty dashboards. [#7008](https://github.com/scalableminds/webknossos/pull/7008)
 
 ### Changed
 - Creating bounding boxes can now be done by dragging the left mouse button (when the bounding box tool is selected). To move around in the dataset while this tool is active, keep ALT pressed. [#7118](https://github.com/scalableminds/webknossos/pull/7118)

diff --git a/frontend/javascripts/components/pricing_enforcers.tsx b/frontend/javascripts/components/pricing_enforcers.tsx
@@ -257,7 +257,7 @@ export function PageUnavailableForYourPlanView({
         <Result
           status="warning"
           title="Feature not available"
-          icon={<i className="drawing-paid-feature-not-available" />}
+          icon={<i className="drawing drawing-paid-feature-not-available" />}
           subTitle={
             <p style={{ maxWidth: "500px", margin: "0 auto" }}>
               {getFeatureNotAvailableInPlanMessage(

diff --git a/frontend/javascripts/dashboard/dashboard_task_list_view.tsx b/frontend/javascripts/dashboard/dashboard_task_list_view.tsx
@@ -392,31 +392,46 @@ class DashboardTaskListView extends React.PureComponent<Props, State> {
 
   renderPlaceholder() {
     return this.state.isLoading ? null : (
-      <>
-        <p>
-          You have no assigned tasks. Request a new task by clicking on the{" "}
-          <strong>Get a New Task</strong> button.
-        </p>
-        {this.props.activeUser.isAdmin && (
-          <>
-            <p>
-              Tasks are a powerful way to distribute annotation jobs among groups of users.{" "}
-              <Link to="/tasks">Create new tasks from the admin menu</Link>.
-            </p>
-            <p>
-              To learn more about the task system in WEBKNOSSOS,{" "}
-              <a
-                href="https://docs.webknossos.org/webknossos/tasks.html"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                check out the documentation
-              </a>
-              .
-            </p>
-          </>
-        )}
-      </>
+      <Row gutter={32} justify="center">
+        <Col span="7">
+          <Card
+            bordered={false}
+            cover={<i className="drawing drawing-empty-list-tasks" style={{ translate: "25%" }} />}
+          >
+            <Card.Meta
+              title="Request a New Task"
+              description={
+                <>
+                  <p style={{ marginTop: 20 }}>
+                    You have no tasks assigned to you. Request a new task by clicking on the{" "}
+                    <strong>Get a New Task</strong> button above.
+                  </p>
+                  {this.props.activeUser.isAdmin && (
+                    <>
+                      <p style={{ marginBottom: 30 }}>
+                        Tasks are a powerful way to distribute annotation jobs among groups of users
+                        as part of the WEBKNOSSOS project management.{" "}
+                      </p>
+                      <a
+                        href="https://docs.webknossos.org/webknossos/tasks.html"
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        <Button>Learn more</Button>
+                      </a>
+                      <Link to="/tasks">
+                        <Button type="primary" style={{ marginLeft: 20 }}>
+                          Create new Tasks
+                        </Button>
+                      </Link>
+                    </>
+                  )}
+                </>
+              }
+            />
+          </Card>
+        </Col>
+      </Row>
     );
   }
 

diff --git a/frontend/javascripts/dashboard/dashboard_view.tsx b/frontend/javascripts/dashboard/dashboard_view.tsx
@@ -177,26 +177,26 @@ class DashboardView extends PureComponent<PropsWithRouter, State> {
             }
           : null,
         {
-          label: "Tasks",
-          key: "tasks",
+          label: "Annotations",
+          key: "explorativeAnnotations",
           children: (
-            <RenderingTabContext.Provider value="tasks">
-              <DashboardTaskListView
+            <RenderingTabContext.Provider value="explorativeAnnotations">
+              <ExplorativeAnnotationsView
                 isAdminView={this.props.isAdminView}
                 userId={this.props.userId}
+                activeUser={this.props.activeUser}
               />
             </RenderingTabContext.Provider>
           ),
         },
         {
-          label: "Annotations",
-          key: "explorativeAnnotations",
+          label: "Tasks",
+          key: "tasks",
           children: (
-            <RenderingTabContext.Provider value="explorativeAnnotations">
-              <ExplorativeAnnotationsView
+            <RenderingTabContext.Provider value="tasks">
+              <DashboardTaskListView
                 isAdminView={this.props.isAdminView}
                 userId={this.props.userId}
-                activeUser={this.props.activeUser}
               />
             </RenderingTabContext.Provider>
           ),

diff --git a/frontend/javascripts/dashboard/dataset_folder_view.tsx b/frontend/javascripts/dashboard/dataset_folder_view.tsx
@@ -4,12 +4,16 @@ import { APIDatasetCompact, APIUser, FolderItem } from "types/api_flow_types";
 import DatasetCollectionContextProvider, {
   useDatasetCollectionContext,
 } from "./dataset/dataset_collection_context";
-
-import DatasetView from "./dataset_view";
+import { Button, Card, Col, Row } from "antd";
+import { Link } from "react-router-dom";
+import * as Utils from "libs/utils";
+import DatasetView, { DatasetAddButton, DatasetRefreshButton } from "./dataset_view";
 import { DetailsSidebar } from "./folders/details_sidebar";
 import { EditFolderModal } from "./folders/edit_folder_modal";
 import { FolderTreeSidebar } from "./folders/folder_tree";
-import { useDatasetsInFolderQuery } from "./dataset/queries";
+import features, { getDemoDatasetUrl } from "features";
+import { RenderToPortal } from "oxalis/view/layouting/portal_utils";
+import { useFolderHierarchyQuery, useDatasetsInFolderQuery } from "./dataset/queries";
 
 type Props = {
   user: APIUser;
@@ -27,6 +31,7 @@ function DatasetFolderViewInner(props: Props) {
   const context = useDatasetCollectionContext();
   const { selectedDatasets, setSelectedDatasets } = context;
   const [folderIdForEditModal, setFolderIdForEditModal] = useState<string | null>(null);
+  const { data: hierarchy } = useFolderHierarchyQuery();
 
   const setSelectedDataset = (ds: APIDatasetCompact | null, multiSelect?: boolean) => {
     if (!ds) {
@@ -89,6 +94,98 @@ function DatasetFolderViewInner(props: Props) {
     );
   }, [context.datasets]);
 
+  const renderNoDatasetsPlaceHolder = () => {
+    const openPublicDatasetCard = (
+      <Col span={7}>
+        <Card bordered={false} cover={<i className="drawing drawing-empty-list-public-gallery" />}>
+          <Card.Meta
+            title="Open a Demo Dataset"
+            description={
+              <>
+                <p>Check out a published community dataset to experience WEBKNOSSOS in action.</p>
+                <a href={getDemoDatasetUrl()} target="_blank" rel="noopener noreferrer">
+                  <Button style={{ marginTop: 30 }}>Open a Community Dataset</Button>
+                </a>
+              </>
+            }
+          />
+        </Card>
+      </Col>
+    );
+
+    const uploadPlaceholderCard = (
+      <Col span={7}>
+        <Card bordered={false} cover={<i className="drawing drawing-empty-list-dataset-upload" />}>
+          <Card.Meta
+            title="Upload & Import Dataset"
+            description={
+              <>
+                <p>
+                  WEBKNOSSOS supports a variety of (remote){" "}
+                  <a
+                    href="https://docs.webknossos.org/webknossos/data_formats.html"
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    file formats
+                  </a>{" "}
+                  and is also able to convert them when necessary.
+                </p>
+                <Link to="/datasets/upload">
+                  <Button type="primary" style={{ marginTop: 30 }}>
+                    Open Dataset Upload & Import
+                  </Button>
+                </Link>
+                ,
+              </>
+            }
+          />
+        </Card>
+      </Col>
+    );
+
+    const adminHeader =
+      Utils.isUserAdminOrDatasetManager(props.user) || Utils.isUserTeamManager(props.user) ? (
+        <div
+          className="pull-right"
+          style={{
+            display: "flex",
+          }}
+        >
+          <DatasetRefreshButton context={context} />
+          <DatasetAddButton context={context} />
+        </div>
+      ) : null;
+
+    return (
+      <React.Fragment>
+        <RenderToPortal portalId="dashboard-TabBarExtraContent">{adminHeader}</RenderToPortal>
+        <Row
+          justify="center"
+          style={{
+            padding: "20px 50px 70px",
+          }}
+          align="middle"
+          gutter={32}
+        >
+          {features().isWkorgInstance ? openPublicDatasetCard : null}
+          {Utils.isUserAdminOrDatasetManager(props.user) ? uploadPlaceholderCard : null}
+        </Row>
+      </React.Fragment>
+    );
+  };
+
+  if (
+    hierarchy != null &&
+    hierarchy.flatItems.length === 1 &&
+    context.datasets.length === 0 &&
+    context.activeFolderId != null
+  ) {
+    // Show a placeholder if only the root folder exists and no dataset is available yet
+    // (aka a new, empty organization)
+    return renderNoDatasetsPlaceHolder();
+  }
+
   return (
     <div
       style={{