refactor(frontend): rename tooltip panel to info pane

frontend/README.md

@@ -109,8 +109,8 @@ Depending on the use-case, we're still calling the same concepts differently som
 - **Query Node / Element** – one node in the query editor, either a concept or a previous query
 - **Previous Query / Stored Query** – a previous query that has been saved in the backend database for future use (as itself or within other queries)
 - **Dataset / Database** – data set that is used to ask queries against
-- **Tooltip** – small area (below), that contains additional information on hovering over certain elements
-- **Additional Infos** – data (key-value pairs) that are part of concept nodes and can be displayed inside the tooltip
+- **Info Pane** – collapsible area on the left, that contains additional information on hovering over certain elements
+- **Additional Infos** – data (key-value pairs) that are part of concept nodes and can be displayed inside the info pane
 
 ## Technical Explanations (mini ADRs – "architectural decision records")
 

frontend/src/js/app/Content.tsx

@@ -3,17 +3,17 @@ import { Group, Panel } from "react-resizable-panels";
 import { ResizeHandle } from "../common/ResizeHandle";
 import { useCollapsiblePanel } from "../common/useCollapsiblePanel";
 import { History } from "../entity-history/History";
+import InfoPane from "../info-pane/InfoPane";
+import InfoPaneCollapsed from "../info-pane/InfoPaneCollapsed";
 import Preview from "../preview/Preview";
-import ActivateTooltip from "../tooltip/ActivateTooltip";
-import Tooltip from "../tooltip/Tooltip";
 import DndProvider from "./DndProvider";
 import LeftPane from "./LeftPane";
 import RightPane from "./RightPane";
 import type { StateT } from "./reducers";
 
 const Content = () => {
-  const displayTooltip = useSelector<StateT, boolean>(
-    (state) => state.tooltip.displayTooltip,
+  const isInfoPaneOpen = useSelector<StateT, boolean>(
+    (state) => state.infoPane.isOpen,
   );
 
   const isPreviewOpen = useSelector<StateT, boolean>(
@@ -24,23 +24,23 @@ const Content = () => {
     (state) => state.entityHistory.isOpen,
   );
 
-  const tooltipPanelRef = useCollapsiblePanel(!displayTooltip);
+  const infoPaneRef = useCollapsiblePanel(!isInfoPaneOpen);
 
   return (
     <DndProvider>
       <div className="relative h-full w-full">
         <Group orientation="horizontal">
           <Panel
-            panelRef={tooltipPanelRef}
+            panelRef={infoPaneRef}
             collapsible
             collapsedSize={30}
             minSize={200}
             maxSize={600}
-            defaultSize={displayTooltip ? 200 : 30}
+            defaultSize={isInfoPaneOpen ? 200 : 30}
           >
-            {displayTooltip ? <Tooltip /> : <ActivateTooltip />}
+            {isInfoPaneOpen ? <InfoPane /> : <InfoPaneCollapsed />}
           </Panel>
-          <ResizeHandle disabled={!displayTooltip} />
+          <ResizeHandle disabled={!isInfoPaneOpen} />
           <Panel minSize={350} defaultSize={600}>
             <LeftPane />
           </Panel>

frontend/src/js/app/actions.ts

@@ -3,6 +3,7 @@ import type { ConceptTreesOpenActions } from "../concept-trees-open/actions";
 import type { DatasetActions } from "../dataset/actions";
 import type { EntityHistoryActions } from "../entity-history/actions";
 import type { ExternalFormActions } from "../external-forms/actions";
+import type { InfoPaneActions } from "../info-pane/actions";
 import type { PaneActions } from "../pane/actions";
 import type { PreviewActions } from "../preview/actions";
 import type { ProjectItemsFilterActions } from "../previous-queries/filter/actions";
@@ -16,7 +17,6 @@ import type { QueryUploadConceptListModalActions } from "../query-upload-concept
 import type { SnackMessageActions } from "../snack-message/actions";
 import type { StandardQueryEditorActions } from "../standard-query-editor/actions";
 import type { StartupActions } from "../startup/actions";
-import type { TooltipActions } from "../tooltip/actions";
 import type { UploadConceptListModalActions } from "../upload-concept-list-modal/actions";
 import type { UserActions } from "../user/actions";
 
@@ -35,7 +35,7 @@ export type Action =
   | SnackMessageActions
   | PreviousQueryListActions
   | StartupActions
-  | TooltipActions
+  | InfoPaneActions
   | ExternalFormActions
   | QueryRunnerActions
   | PaneActions

frontend/src/js/app/reducers.ts

@@ -14,6 +14,7 @@ import {
   activeFormReducer,
   availableFormsReducer,
 } from "../external-forms/reducer";
+import infoPane, { type InfoPaneStateT } from "../info-pane/reducer";
 import panes, { type PanesStateT } from "../pane/reducer";
 import preview, { type PreviewStateT } from "../preview/reducer";
 import projectItemsFilter, {
@@ -44,7 +45,6 @@ import selectedSecondaryIdsReducer, {
   type SelectedSecondaryIdStateT,
 } from "../standard-query-editor/selectedSecondaryIdReducer";
 import startup, { type StartupStateT } from "../startup/reducer";
-import tooltip, { type TooltipStateT } from "../tooltip/reducer";
 import uploadConceptListModal, {
   type UploadConceptListModalStateT,
 } from "../upload-concept-list-modal/reducer";
@@ -54,7 +54,7 @@ export type StateT = {
   conceptTrees: ConceptTreesStateT;
   conceptTreesOpen: ConceptTreesOpenStateT;
   datasets: DatasetStateT;
-  tooltip: TooltipStateT;
+  infoPane: InfoPaneStateT;
   panes: PanesStateT;
   uploadConceptListModal: UploadConceptListModalStateT;
   user: UserStateT;
@@ -89,7 +89,7 @@ const buildAppReducer = () => {
     conceptTreesOpen,
     uploadConceptListModal,
     datasets,
-    tooltip,
+    infoPane,
     panes,
     previousQueries,
     projectItemsSearch,

frontend/src/js/button/HistoryButton.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
 
 import { openHistory } from "../entity-history/actions";
-import WithTooltip from "../tooltip/WithTooltip";
+import WithTooltip from "../ui-components/WithTooltip";
 
 import IconButton from "./IconButton";
 

frontend/src/js/concept-trees-open/ConceptTreesOpenButtons.tsx

@@ -8,7 +8,7 @@ import type { StateT } from "../app/reducers";
 import IconButton from "../button/IconButton";
 import { clearSearchQuery } from "../concept-trees/actions";
 import { useRootConceptIds } from "../concept-trees/useRootConceptIds";
-import WithTooltip from "../tooltip/WithTooltip";
+import WithTooltip from "../ui-components/WithTooltip";
 
 import { closeAllConceptOpen, resetAllConceptOpen } from "./actions";
 import type { ConceptTreesOpenStateT } from "./reducer";

frontend/src/js/concept-trees/ConceptTreeNodeTextContainer.tsx

@@ -5,12 +5,12 @@ import type { ConceptIdT, ConceptT } from "../api/types";
 import { getWidthAndHeight } from "../app/DndProvider";
 import { DNDType } from "../common/constants/dndTypes";
 import { exists } from "../common/helpers/exists";
+import AdditionalInfoHoverable from "../info-pane/AdditionalInfoHoverable";
 import { getNodeIcon } from "../model/node";
 import type {
   ConceptQueryNodeType,
   DragItemConceptTreeNode,
 } from "../standard-query-editor/types";
-import AdditionalInfoHoverable from "../tooltip/AdditionalInfoHoverable";
 
 import ConceptTreeNodeText from "./ConceptTreeNodeText";
 import type { SearchT } from "./reducer";

frontend/src/js/dataset/DatasetSelector.tsx

@@ -6,8 +6,8 @@ import { tv } from "tailwind-variants";
 import type { DatasetT, SelectOptionT } from "../api/types";
 import type { StateT } from "../app/reducers";
 import { exists } from "../common/helpers/exists";
-import WithTooltip from "../tooltip/WithTooltip";
 import InputSelect from "../ui-components/InputSelect/InputSelect";
+import WithTooltip from "../ui-components/WithTooltip";
 
 import { useSelectDataset } from "./actions";
 

frontend/src/js/editor-v2/EditorV2.tsx

@@ -22,9 +22,9 @@ import type {
   DragItemConceptTreeNode,
   DragItemQuery,
 } from "../standard-query-editor/types";
-import { ConfirmableTooltip } from "../tooltip/ConfirmableTooltip";
-import WithTooltip from "../tooltip/WithTooltip";
+import { ConfirmableTooltip } from "../ui-components/ConfirmableTooltip";
 import Dropzone from "../ui-components/Dropzone";
+import WithTooltip from "../ui-components/WithTooltip";
 import { EDITOR_DROP_TYPES, HOTKEYS } from "./config";
 import { useConnectorEditing } from "./connector-update/useConnectorRotation";
 import { DateModal } from "./date-restriction/DateModal";

frontend/src/js/editor-v2/KeyboardShortcutTooltip.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
 
 import { KeyboardKey } from "../common/components/KeyboardKey";
-import WithTooltip from "../tooltip/WithTooltip";
+import WithTooltip from "../ui-components/WithTooltip";
 
 const keyTooltip = tv({
   base: ["flex items-center", "gap-[5px]", "px-[15px] py-2"],

frontend/src/js/editor-v2/TreeNode.tsx

@@ -12,11 +12,11 @@ import type {
   DragItemConceptTreeNode,
   DragItemQuery,
 } from "../standard-query-editor/types";
-import WithTooltip from "../tooltip/WithTooltip";
 import Dropzone, {
   type DropzoneProps,
   type PossibleDroppableObject,
 } from "../ui-components/Dropzone";
+import WithTooltip from "../ui-components/WithTooltip";
 import { EDITOR_DROP_TYPES } from "./config";
 import { DateRange } from "./date-restriction/DateRange";
 import { Connector, Grid } from "./EditorLayout";

frontend/src/js/entity-history/ContentControl.tsx

@@ -8,7 +8,7 @@ import { memo, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import IconButton from "../button/IconButton";
-import WithTooltip from "../tooltip/WithTooltip";
+import WithTooltip from "../ui-components/WithTooltip";
 
 export type ContentType =
   | "groupId"

frontend/src/js/entity-history/DetailControl.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from "react-i18next";
 import { tv } from "tailwind-variants";
 
 import IconButton from "../button/IconButton";
-import WithTooltip from "../tooltip/WithTooltip";
+import WithTooltip from "../ui-components/WithTooltip";
 
 const root = tv({ base: "flex flex-col items-center" });
 export type DetailLevel = "summary" | "detail" | "full";

frontend/src/js/entity-history/InteractionControl.tsx

@@ -3,7 +3,7 @@ import { memo } from "react";
 import { useTranslation } from "react-i18next";
 
 import IconButton from "../button/IconButton";
-import WithTooltip from "../tooltip/WithTooltip";
+import WithTooltip from "../ui-components/WithTooltip";
 
 const InteractionControl = ({
   onCloseAll,

frontend/src/js/entity-history/Navigation.tsx

@@ -20,8 +20,8 @@ import { tv } from "tailwind-variants";
 import type { SelectOptionT } from "../api/types";
 import type { StateT } from "../app/reducers";
 import IconButton from "../button/IconButton";
-import { ConfirmableTooltip } from "../tooltip/ConfirmableTooltip";
-import WithTooltip from "../tooltip/WithTooltip";
+import { ConfirmableTooltip } from "../ui-components/ConfirmableTooltip";
+import WithTooltip from "../ui-components/WithTooltip";
 import { closeHistory, resetHistory, useUpdateHistorySession } from "./actions";
 import { EntityIdsList } from "./EntityIdsList";
 import type { EntityIdsStatus } from "./History";

frontend/src/js/entity-history/NavigationHeader.tsx

@@ -9,7 +9,7 @@ import type { StateT } from "../app/reducers";
 import IconButton from "../button/IconButton";
 import ProgressBar from "../common/components/ProgressBar";
 import { Heading3 } from "../headings/Headings";
-import WithTooltip from "../tooltip/WithTooltip";
+import WithTooltip from "../ui-components/WithTooltip";
 
 import { SettingsModal } from "./SettingsModal";
 
@@ -97,7 +97,7 @@ export const NavigationHeader = memo(
         <div className="grid gap-x-2 grid-cols-[auto_1fr] items-center">
           <Heading3 className={heading({ end: true })}>{idsCount}</Heading3>
           <span className={infoText()}>
-            {t("tooltip.entitiesFound", { count: idsCount })}
+            {t("common.entitiesFound", { count: idsCount })}
           </span>
           <Heading3 className={heading({ end: true })}>{markedCount}</Heading3>
           <span className={infoText()}>

frontend/src/js/entity-history/TimeStratifiedConceptChart.tsx

@@ -9,7 +9,7 @@ import type {
 } from "../api/types";
 import { getConceptById } from "../concept-trees/globalTreeStoreHelper";
 import FaIcon from "../icon/FaIcon";
-import WithTooltip from "../tooltip/WithTooltip";
+import WithTooltip from "../ui-components/WithTooltip";
 
 import { ConceptBubble } from "./ConceptBubble";
 

frontend/src/js/entity-history/VisibilityControl.tsx

@@ -3,7 +3,7 @@ import { memo } from "react";
 import { useTranslation } from "react-i18next";
 
 import IconButton from "../button/IconButton";
-import WithTooltip from "../tooltip/WithTooltip";
+import WithTooltip from "../ui-components/WithTooltip";
 
 const VisibilityControl = ({
   blurred,

frontend/src/js/entity-history/timeline-search/SearchControl.tsx

@@ -2,7 +2,7 @@ import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
 import IconButton from "../../button/IconButton";
-import WithTooltip from "../../tooltip/WithTooltip";
+import WithTooltip from "../../ui-components/WithTooltip";
 import { useTimelineSearch } from "./timelineSearchState";
 
 const SearchControl = () => {

frontend/src/js/entity-history/timeline/EventCard.tsx

@@ -14,7 +14,7 @@ import type {
 import { Highlighter } from "../../common/components/Highlighter";
 import { exists } from "../../common/helpers/exists";
 import FaIcon from "../../icon/FaIcon";
-import WithTooltip from "../../tooltip/WithTooltip";
+import WithTooltip from "../../ui-components/WithTooltip";
 import type { ContentFilterValue } from "../ContentControl";
 import { RowDates } from "../RowDates";
 import type { DateRow, EntityEvent } from "../reducer";

frontend/src/js/entity-history/timeline/YearHead.tsx

@@ -10,7 +10,7 @@ import type {
 import { exists } from "../../common/helpers/exists";
 import { getConceptById } from "../../concept-trees/globalTreeStoreHelper";
 import FaIcon from "../../icon/FaIcon";
-import WithTooltip from "../../tooltip/WithTooltip";
+import WithTooltip from "../../ui-components/WithTooltip";
 import { ConceptBubble } from "../ConceptBubble";
 
 import { SmallHeading } from "./SmallHeading";

frontend/src/js/external-forms/FormsNavigation.tsx

@@ -6,9 +6,9 @@ import { tv } from "tailwind-variants";
 import type { StateT } from "../app/reducers";
 import IconButton from "../button/IconButton";
 import { useActiveLang } from "../localization/useActiveLang";
-import { ConfirmableTooltip } from "../tooltip/ConfirmableTooltip";
-import WithTooltip from "../tooltip/WithTooltip";
+import { ConfirmableTooltip } from "../ui-components/ConfirmableTooltip";
 import InputSelect from "../ui-components/InputSelect/InputSelect";
+import WithTooltip from "../ui-components/WithTooltip";
 
 import { setExternalForm } from "./actions";
 import type { Form } from "./config-types";

frontend/src/js/external-forms/form-components/DropzoneList.tsx

@@ -4,14 +4,14 @@ import type { DropTargetMonitor } from "react-dnd";
 import { tv } from "tailwind-variants";
 
 import IconButton from "../../button/IconButton";
-import InfoTooltip from "../../tooltip/InfoTooltip";
 import type {
   ChildArgs,
   PossibleDroppableObject,
 } from "../../ui-components/Dropzone";
 import DropzoneWithFileInput, {
   type DragItemFile,
 } from "../../ui-components/DropzoneWithFileInput";
+import InfoTooltip from "../../ui-components/InfoTooltip";
 import Label from "../../ui-components/Label";
 
 import DropzoneBetweenElements from "./DropzoneBetweenElements";

frontend/src/js/external-forms/form-concept-group/FormConceptNode.tsx

@@ -13,7 +13,7 @@ import { canNodeBeDropped } from "../../model/node";
 import { HoverNavigatable } from "../../small-tab-navigation/HoverNavigatable";
 import { getRootNodeLabel } from "../../standard-query-editor/helper";
 import type { DragItemConceptTreeNode } from "../../standard-query-editor/types";
-import WithTooltip from "../../tooltip/WithTooltip";
+import WithTooltip from "../../ui-components/WithTooltip";
 
 const node = tv({
   base: [

frontend/src/js/external-forms/form-query-dropzone/FormQueryDropzone.tsx

@@ -3,8 +3,8 @@ import { useCallback, useRef } from "react";
 import { DNDType } from "../../common/constants/dndTypes";
 import { exists } from "../../common/helpers/exists";
 import type { DragItemQuery } from "../../standard-query-editor/types";
-import InfoTooltip from "../../tooltip/InfoTooltip";
 import Dropzone from "../../ui-components/Dropzone";
+import InfoTooltip from "../../ui-components/InfoTooltip";
 import Label from "../../ui-components/Label";
 
 import ValidatedFormQueryResult from "./ValidatedFormQueryResult";

frontend/src/js/external-forms/form/fields/DateField.tsx

@@ -9,7 +9,7 @@ import {
 } from "../../../common/helpers/dateHelper";
 import { exists } from "../../../common/helpers/exists";
 import FaIcon from "../../../icon/FaIcon";
-import InfoTooltip from "../../../tooltip/InfoTooltip";
+import InfoTooltip from "../../../ui-components/InfoTooltip";
 import InputDate from "../../../ui-components/InputDate/InputDate";
 import Label from "../../../ui-components/Label";
 import type { DateField as DateFieldT } from "../../config-types";

frontend/src/js/external-forms/form/fields/DisclosureListField.tsx

@@ -13,7 +13,7 @@ import { TransparentButton } from "../../../button/TransparentButton";
 import { exists } from "../../../common/helpers/exists";
 import { usePrevious } from "../../../common/helpers/usePrevious";
 import FaIcon from "../../../icon/FaIcon";
-import InfoTooltip from "../../../tooltip/InfoTooltip";
+import InfoTooltip from "../../../ui-components/InfoTooltip";
 import type { DisclosureListField as DisclosureListFieldT } from "../../config-types";
 import {
   getFieldKey,

frontend/src/js/header/HelpMenu.tsx

@@ -10,7 +10,7 @@ import { tv } from "tailwind-variants";
 
 import { useAbout } from "../app/About";
 import IconButton from "../button/IconButton";
-import WithTooltip from "../tooltip/WithTooltip";
+import WithTooltip from "../ui-components/WithTooltip";
 
 const list = tv({ base: ["flex flex-col", "gap-[2px]", "p-2"] });
 

frontend/src/js/header/LogoutButton.tsx

@@ -7,7 +7,7 @@ import { deleteStoredAuthToken } from "../authorization/helper";
 import IconButton from "../button/IconButton";
 import { clearIndexedDBCache } from "../common/helpers/indexedDBCache";
 import { isIDPEnabled } from "../environment";
-import WithTooltip from "../tooltip/WithTooltip";
+import WithTooltip from "../ui-components/WithTooltip";
 
 const LogoutButton = ({ className }: { className?: string }) => {
   const { t } = useTranslation();