Show dataset name or explorative tracing name in webknossos tab title (…

…#4767)

* change tab title for annotation

* display owning organization

* update changelog

* update changelog

* fix typo

CHANGELOG.unreleased.md

@@ -25,6 +25,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - In the Edit/Import Dataset form, the "Sharing" tab was renamed to "Sharing & Permissions". Also, existing permission-related settings were moved to that tab.  [#4683](https://github.com/scalableminds/webknossos/pull/4763)
 - Improved rotation of camera in 3D viewport. [#4768](https://github.com/scalableminds/webknossos/pull/4768)
 - Improved handling and communication of failures during download of data from datasets. [#4765](https://github.com/scalableminds/webknossos/pull/4765)
+- The title of a tab now shows the active tracing or dataset as well as the corresponding organization. [#4653](https://github.com/scalableminds/webknossos/pull/4767)
 
 ### Fixed
 - Speed up NML import in existing tracings for NMLs with many trees (20,000+). [#4742](https://github.com/scalableminds/webknossos/pull/4742)

frontend/javascripts/oxalis/view/components/tab_title_component.js

@@ -0,0 +1,10 @@
+// @flow
+
+import useDocumentTitle from "@rehooks/document-title";
+
+function TabTitle({ title }: { title: string }) {
+  useDocumentTitle(title);
+  return null;
+}
+
+export default TabTitle;

frontend/javascripts/oxalis/view/layouting/tracing_layout_view.js

@@ -38,6 +38,7 @@ import messages from "messages";
 import window, { document, location } from "libs/window";
 import ErrorHandling from "libs/error_handling";
 import CrossOriginApi from "oxalis/api/cross_origin_api";
+import TabTitle from "../components/tab_title_component";
 
 import { GoldenLayoutAdapter } from "./golden_layout_adapter";
 import { determineLayout } from "./default_layout_configs";
@@ -58,6 +59,8 @@ type StateProps = {|
   isDatasetOnScratchVolume: boolean,
   autoSaveLayouts: boolean,
   datasetName: string,
+  displayName: string,
+  organization: string,
 |};
 type DispatchProps = {|
   setAutoSaveLayouts: boolean => void,
@@ -159,6 +162,15 @@ class TracingLayoutView extends React.PureComponent<PropsWithRouter, State> {
     storeLayoutConfig(this.currentLayoutConfig, layoutKey, this.currentLayoutName);
   };
 
+  getTabTitle = () => {
+    const titleArray: Array<string> = [
+      this.props.displayName,
+      this.props.organization,
+      "webKnossos",
+    ];
+    return titleArray.filter(elem => elem).join(" | ");
+  };
+
   getLayoutNamesFromCurrentView = (layoutKey): Array<string> =>
     this.props.storedLayouts[layoutKey] ? Object.keys(this.props.storedLayouts[layoutKey]) : [];
 
@@ -190,6 +202,7 @@ class TracingLayoutView extends React.PureComponent<PropsWithRouter, State> {
         onImport={isUpdateTracingAllowed ? importTracingFiles : createNewTracing}
         isUpdateAllowed={isUpdateTracingAllowed}
       >
+        <TabTitle title={this.getTabTitle()} />
         <OxalisController
           initialAnnotationType={this.props.initialAnnotationType}
           initialCommandType={this.props.initialCommandType}
@@ -343,6 +356,8 @@ function mapStateToProps(state: OxalisState): StateProps {
     storedLayouts: state.uiInformation.storedLayouts,
     isDatasetOnScratchVolume: state.dataset.dataStore.isScratch,
     datasetName: state.dataset.name,
+    displayName: state.tracing.name ? state.tracing.name : state.dataset.name,
+    organization: state.dataset.owningOrganization,
   };
 }
 

package.json

@@ -129,6 +129,7 @@
     ]
   },
   "dependencies": {
+    "@rehooks/document-title": "^1.0.2",
     "@scalableminds/prop-types": "^15.6.1",
     "@scalableminds/saxophone": "^0.5.0",
     "@tensorflow/tfjs": "^1.0.0",

yarn.lock

@@ -1162,6 +1162,13 @@
   resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.0.2.tgz#1d94f02800b094753f9271c206a26c2a06ca14ee"
   integrity sha512-8/qcMh15507AnXJ3lBeuhsdFwnWQqnp68EpUuHlYPixJ5vjVmls7/Jq48cnUlrZI8Jd9U1jkhfCl0gaT5KMgVw==
 
+"@rehooks/document-title@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@rehooks/document-title/-/document-title-1.0.2.tgz#d03e8a09e09f6fd481518982b151ab0da4bc5eec"
+  integrity sha512-8ckcelpgqmWtGNXob+P6Lw2lHM2IfkP7sl8QJ2BNHkFeDQnc1CYeYf2NMVuFflYh3YVlAlfUzAxcIG1QCBrRQQ==
+  dependencies:
+    react "^16.13.1"
+
 "@rpl/[email protected]":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@rpl/badge-up/-/badge-up-2.2.0.tgz#79a5ccf72bdb1777390bb7e4caa08dc42d57dd9a"
@@ -10435,6 +10442,15 @@ [email protected]:
     object-assign "^4.1.0"
     prop-types "^15.5.7"
 
+react@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
+  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+
 react@^16.3.0, react@^16.8.0:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"