diff --git a/src/components/TreeView/DomainTile.tsx b/src/components/TreeView/DomainTile.tsx index a32931a6c7..fb92eea668 100644 --- a/src/components/TreeView/DomainTile.tsx +++ b/src/components/TreeView/DomainTile.tsx @@ -5,7 +5,8 @@ import { KeyboardArrowDown, KeyboardArrowUp, } from "@material-ui/icons"; -import React, { ReactElement } from "react"; +import { t } from "i18next"; +import React, { CSSProperties, ReactElement } from "react"; import { SemanticDomain } from "api/models"; @@ -22,17 +23,26 @@ interface DomainTileProps { direction?: Direction | undefined; } +const RootId = "Sem"; + +export function domainText( + domain: SemanticDomain, + extraProps: CSSProperties = {} +): ReactElement { + return ( +
+ + {domain.id !== RootId ? domain.id : ""} + + + {domain.id !== "Sem" ? domain.name : t("addWords.domain")} + +
+ ); +} + // Creates a semantic domain tile, which can be clicked on to navigate to that semantic domain export default class DomainTile extends React.Component { - domainText(domain: SemanticDomain): ReactElement { - return ( -
- {domain.id} - {domain.name} -
- ); - } - textWithArrow( domain: SemanticDomain, direction: Direction | undefined @@ -41,7 +51,7 @@ export default class DomainTile extends React.Component { case Direction.Down: return (
- {this.domainText(domain)} + {domainText(domain)}
); @@ -56,7 +66,7 @@ export default class DomainTile extends React.Component { - {this.domainText(domain)} + {domainText(domain)} ); case Direction.Right: @@ -67,7 +77,7 @@ export default class DomainTile extends React.Component { justifyContent="space-around" wrap="nowrap" > - {this.domainText(domain)} + {domainText(domain)} @@ -77,11 +87,11 @@ export default class DomainTile extends React.Component { return (
- {this.domainText(domain)} + {domainText(domain)}
); default: - return
{this.domainText(domain)}
; + return
{domainText(domain)}
; } } diff --git a/src/components/TreeView/TreeViewActions.ts b/src/components/TreeView/TreeViewActions.ts index 5f054fc00c..5d811a99e6 100644 --- a/src/components/TreeView/TreeViewActions.ts +++ b/src/components/TreeView/TreeViewActions.ts @@ -1,9 +1,9 @@ import { defaultState } from "./TreeViewReducer"; +import { TreeActionType, TreeViewAction } from "./TreeViewReduxTypes"; import { SemanticDomain, SemanticDomainTreeNode } from "api/models"; import { getSemanticDomainTreeNode } from "backend"; import { StoreState } from "types"; import { StoreStateDispatch } from "types/Redux/actions"; -import { TreeActionType, TreeViewAction } from "./TreeViewReduxTypes"; export function closeTreeAction(): TreeViewAction { return { type: TreeActionType.CLOSE_TREE }; diff --git a/src/components/TreeView/TreeViewHeader.tsx b/src/components/TreeView/TreeViewHeader.tsx index 0d76efb867..2fabc5586c 100644 --- a/src/components/TreeView/TreeViewHeader.tsx +++ b/src/components/TreeView/TreeViewHeader.tsx @@ -1,14 +1,12 @@ -import { - Button, - ImageList, - ImageListItem, - Typography, -} from "@material-ui/core"; +import { Button, ImageList, ImageListItem } from "@material-ui/core"; import { useCallback, useEffect } from "react"; import { Key } from "ts-key-enum"; import { SemanticDomain, SemanticDomainTreeNode } from "api"; -import DomainTile, { Direction } from "components/TreeView/DomainTile"; +import DomainTile, { + domainText, + Direction, +} from "components/TreeView/DomainTile"; export interface TreeHeaderProps { currentDomain: SemanticDomainTreeNode; @@ -40,10 +38,7 @@ export function TreeViewHeader(props: TreeHeaderProps) { id="current-domain" style={{ height: "95%" }} > -
- {props.currentDomain.id} - {props.currentDomain.name} -
+ {domainText(props.currentDomain, { minWidth: 200 })} diff --git a/src/components/TreeView/tests/TreeViewActions.test.tsx b/src/components/TreeView/tests/TreeViewActions.test.tsx index 2aead87c83..d6bfdc0b13 100644 --- a/src/components/TreeView/tests/TreeViewActions.test.tsx +++ b/src/components/TreeView/tests/TreeViewActions.test.tsx @@ -1,6 +1,7 @@ import configureMockStore from "redux-mock-store"; import thunk from "redux-thunk"; +import { TreeActionType } from "../TreeViewReduxTypes"; import * as backend from "backend"; import { setDomainLanguageAction, @@ -8,7 +9,6 @@ import { } from "components/TreeView/TreeViewActions"; import { defaultState } from "components/TreeView/TreeViewReducer"; import { newSemanticDomainTreeNode } from "types/semanticDomain"; -import { TreeActionType } from "../TreeViewReduxTypes"; jest.mock("backend", () => ({ getSemanticDomainTreeNode: (id: string, lang: string) => diff --git a/src/components/TreeView/tests/TreeViewComponent.test.tsx b/src/components/TreeView/tests/TreeViewComponent.test.tsx index 4ec3815fcd..0a4d365e27 100644 --- a/src/components/TreeView/tests/TreeViewComponent.test.tsx +++ b/src/components/TreeView/tests/TreeViewComponent.test.tsx @@ -4,7 +4,6 @@ import renderer, { ReactTestRenderer, } from "react-test-renderer"; import configureMockStore from "redux-mock-store"; - import "tests/mockReactI18next"; import thunk from "redux-thunk"; diff --git a/src/components/TreeView/tests/TreeViewReducer.test.tsx b/src/components/TreeView/tests/TreeViewReducer.test.tsx index 33e4e0cdb1..f69e284a1e 100644 --- a/src/components/TreeView/tests/TreeViewReducer.test.tsx +++ b/src/components/TreeView/tests/TreeViewReducer.test.tsx @@ -1,12 +1,12 @@ -import { - TreeViewAction, - TreeActionType, -} from "components/TreeView/TreeViewReduxTypes"; import { treeViewReducer, defaultState, TreeViewState, } from "components/TreeView/TreeViewReducer"; +import { + TreeViewAction, + TreeActionType, +} from "components/TreeView/TreeViewReduxTypes"; import { StoreAction, StoreActionTypes } from "rootActions"; import { newSemanticDomain } from "types/semanticDomain"; diff --git a/src/components/TreeView/tests/__snapshots__/TreeDepiction.test.tsx.snap b/src/components/TreeView/tests/__snapshots__/TreeDepiction.test.tsx.snap index fd42919cb4..5d745f8d65 100644 --- a/src/components/TreeView/tests/__snapshots__/TreeDepiction.test.tsx.snap +++ b/src/components/TreeView/tests/__snapshots__/TreeDepiction.test.tsx.snap @@ -84,7 +84,7 @@ Array [

- + head

@@ -197,11 +197,11 @@ Array [ > 1 -
parent -
+

1.2 -
kid2 -
+

- depth=3 +

1.2.1
-
depth=3 -
+

1.0 -
kid0 -
+

- evenData0 +

- evenData1 +

- evenData2 +

- evenData3 +

1.2.1.1.1
-
depth=5 -
+

1.1 -
kid1 -
+

- oddData0 +

- oddData1 +

- oddData2 +

ws.bcp47), // nonExplicitSupportedLngs will (e.g.) use 'es' if the browser is 'es-MX' nonExplicitSupportedLngs: true,