New dataset selector

src/components/controls/choose-dataset.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+import { connect, MapStateToProps } from "react-redux";
+import { withTranslation, WithTranslation } from "react-i18next";
+import styled from "styled-components";
+import { SidebarSubtitle } from "./styles";
+import { SET_MODAL } from "../../actions/types";
+import { FaSearch } from "react-icons/fa";
+import type { RootState, AppDispatch } from "../../store";
+
+const DatasetSelectContainer = styled.div`
+  cursor: pointer;
+  padding-top: 20px;
+
+  &:hover ${SidebarSubtitle} {
+    color: ${(props): string => props.theme.selectedColor};
+  }
+`;
+
+const DatasetName = styled(SidebarSubtitle)`
+  font-size: 16px;
+`;
+
+const ChangeDatasetRow = styled.div`
+  padding-top: 5px;
+`;
+
+const ChangeDatasetLabel = styled(SidebarSubtitle)`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+const SearchIcon = styled(FaSearch)`
+  position: relative;
+  top: 1px;
+`;
+
+export interface Dataset {
+  parts: string[]
+  snapshot?: string
+}
+
+export function currentDataset(): Dataset {
+  const parts = window.location.pathname
+    .replace(/^\//, '')
+    .replace(/\/$/, '')
+    .split(":")[0] // drop any tangletree dataset (RHS tree / second tree)
+    .split('/');
+  let snapshot: string | undefined;
+  const lastPart = parts.at(-1);
+  if (lastPart && lastPart.includes('@')) {
+    const [word, snap] = lastPart.split('@');
+    parts[parts.length - 1] = word;
+    snapshot = snap;
+  }
+  return { parts, snapshot };
+}
+
+export const SIDEBAR_DATASET_CHANGE_ID = 'sidebar-dataset-change';
+
+interface StateProps {
+  available: RootState["controls"]["available"];
+}
+
+interface DispatchProps {
+  dispatch: AppDispatch;
+}
+
+type Props = StateProps & DispatchProps & WithTranslation;
+
+class ChooseDataset extends React.Component<Props> {
+  override render(): JSX.Element | null {
+    if (!this.props.available?.datasets?.length) {
+      /* typically this is the case if the available dataset fetch hasn't returned
+      or it has returned an empty array of datasets */
+      return null;
+    }
+
+    const dataset = currentDataset();
+
+    return (
+      <DatasetSelectContainer
+        id='dataset-select'
+        role="button"
+        tabIndex={0}
+        aria-label="Change dataset"
+        onClick={(): void => {
+          this.props.dispatch({ type: SET_MODAL, modal: "datasetSelector" })
+        }}
+      >
+        <DatasetName>
+          {dataset.parts.join(' / ') + (dataset.snapshot ? ` @ ${dataset.snapshot}` : '')}
+        </DatasetName>
+
+        <ChangeDatasetRow id={SIDEBAR_DATASET_CHANGE_ID}>
+          <ChangeDatasetLabel>
+            <SearchIcon />
+            {this.props.t('sidebar:changeDataset', 'change dataset')}
+          </ChangeDatasetLabel>
+        </ChangeDatasetRow>
+      </DatasetSelectContainer>
+    );
+  }
+}
+
+const mapStateToProps: MapStateToProps<StateProps, Record<string, never>, RootState> = (
+  state: RootState,
+): StateProps => ({
+  available: state.controls.available
+});
+
+const ChooseDatasetConnected = withTranslation()(connect(mapStateToProps)(ChooseDataset));
+export default ChooseDatasetConnected;