Develop (#121)

Datawheel · Nov 5, 2024 · 3bcfd0e · 3bcfd0e
2 parents c016c87 + ba6e31b
commit 3bcfd0e
Show file tree

Hide file tree

Showing 15 changed files with 366 additions and 492 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
       "import": "./dist/main.js"
     }
   },
+  "types": "dist/main.d.ts",
   "files": [
     "dist",
     "README.md"
@@ -69,8 +70,8 @@
     "react-dom": "^18.2.0",
     "react-redux": "^7.2.0",
     "redux": "^4.2.0",
-    "tsup": "^8.2.4",
-    "typescript": "^5.2.2",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3",
     "vite": "^5.0.0",
     "wrangler": "^3.59.0"
   }

diff --git a/src/components/DrawerMenu.tsx b/src/components/DrawerMenu.tsx
@@ -549,7 +549,13 @@ export function NumberInputComponent({text, filter}: {text: string; filter: Filt
   );
 }
 
-export function MinMax({filter, ...rest}: {filter: FilterItem}) {
+// Add hideControls to the MinMax props interface
+interface MinMaxProps {
+  filter: FilterItem;
+  hideControls?: boolean;  // Make it optional with ?
+}
+
+export const MinMax: React.FC<MinMaxProps> = ({ filter, hideControls, ...rest }) => {
   const actions = useActions();
 
   function onInputChangeMinMax(props: {filter: FilterItem; min: number | ""; max: number | ""}) {
@@ -578,18 +584,20 @@ export function MinMax({filter, ...rest}: {filter: FilterItem}) {
         description={"Min"}
         value={min}
         onChange={value => onInputChangeMinMax({filter, min: value, max})}
+        hideControls={hideControls}
         {...rest}
       />
       <NumberInput
         placeholder={"Max"}
         description={"Max"}
         value={max}
         onChange={value => onInputChangeMinMax({filter, min, max: value})}
+        hideControls={hideControls}
         {...rest}
       />
     </Flex>
   );
-}
+};
 
 export function FilterFnsMenu({filter}: {filter: FilterItem}) {
   const actions = useActions();

diff --git a/src/components/ExplorerContent.tsx b/src/components/ExplorerContent.tsx
@@ -45,7 +45,7 @@ export function ExplorerContent(props: {
   defaultDataLocale?: string;
   defaultOpenParams: string;
   height: CSSObject["height"];
-  locale?: string;
+  locale: string;
   panels: PanelDescriptor[];
   serverConfig?: RequestInit;
   serverURL: string;
@@ -83,10 +83,10 @@ export function ExplorerContent(props: {
     <div className={classes.container}>
       <div className={classes.root}>
         <AppProviders>
-          <SideBarProvider>
+          <SideBarProvider locale={props.locale}>
             <SideBar>
               <SideBarItem>
-                <ParamsExplorer />
+                <ParamsExplorer locale={props.locale} />
               </SideBarItem>
             </SideBar>
           </SideBarProvider>

diff --git a/src/components/ParamsExplorer.tsx b/src/components/ParamsExplorer.tsx
@@ -1,12 +1,14 @@
 import React from "react";
 import {SelectCube} from "./SelectCubes";
 
-type Props = {};
+type Props = {
+  locale: string
+};
 
 function ParamsExplorer(props: Props) {
-  const {} = props;
+  const {locale} = props;
   return (
-      <SelectCube />
+      <SelectCube locale={locale}/>
   );
 }
 

diff --git a/src/components/PivotView.tsx b/src/components/PivotView.tsx
@@ -5,7 +5,7 @@ import {
   useMantineReactTable,
   type MRT_TableOptions as TableOptions,
 } from "mantine-react-table";
-import React, {useMemo, useState} from "react";
+import React, {forwardRef, useMemo, useState} from "react";
 import {useSelector} from "react-redux";
 import {Aggregator} from "../api";
 import {mapDimensionHierarchyLevels} from "../api/traverse";
@@ -20,11 +20,24 @@ import {isActiveItem} from "../utils/validation";
 import {ButtonDownload} from "./ButtonDownload";
 import {NonIdealState} from "./NonIdealState";
 import {SelectObject} from "./Select";
+import type {SelectObjectProps} from "./Select";
+
 
 type DrilldownType = "geo" | "standard" | "time" | "prop";
 type VoidFunction = (...args) => void;
 
-const SelectOption = SelectObject<{label: string; value: string; type: string}>;
+type SelectOptionType = {
+  label: string;
+  value: string;
+  type: string;
+};
+
+const SelectOption = forwardRef<HTMLSelectElement, SelectObjectProps<SelectOptionType>>(
+  (props, ref) => {
+    return <SelectObject ref={ref} {...props} />;
+  }
+);
+
 
 const useStyles = createStyles(theme => ({
   container: {

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -1,27 +1,30 @@
-import {Button, Group, Input, Select, SelectProps} from "@mantine/core";
+import {Button, Group, Input, Select, SelectItem, SelectProps} from "@mantine/core";
 import React, {useMemo, forwardRef} from "react";
 import {accesorFactory, identity, keyBy} from "../utils/transform";
 
 type PropertyAccesor<T> =
   | (T extends string | number ? never : keyof T)
-  | ((item: T) => string | number);
+  | ((item: T) => string);
+
+export type SelectObjectProps<T> = {
+  disabled?: boolean;
+  getLabel?: PropertyAccesor<T>;
+  getValue?: PropertyAccesor<T>;
+  hidden?: boolean;
+  items: T[];
+  label?: string;
+  loading?: boolean;
+  onItemSelect?: (item: T) => void;
+  searchable?: boolean;
+  selectedItem?: T | string | null;
+  selectProps?: Partial<SelectProps>;
+};
+
 
 /** */
-export const SelectObject = forwardRef(function <T>(
-  props: {
-    disabled?: boolean;
-    getLabel?: PropertyAccesor<T>;
-    getValue?: PropertyAccesor<T>;
-    hidden?: boolean;
-    items: T[];
-    label?: string;
-    loading?: boolean;
-    onItemSelect?: (item: T) => void;
-    searchable?: boolean;
-    selectedItem?: T | string | null;
-    selectProps?: Partial<SelectProps>;
-  },
-  ref
+export const SelectObject = forwardRef(function <T extends SelectItem>(
+  props: SelectObjectProps<T> & { ref?: React.Ref<any> },
+  ref: React.Ref<any>
 ) {
   const {
     getLabel,
@@ -33,8 +36,8 @@ export const SelectObject = forwardRef(function <T>(
   } = props;
 
   const [itemList, itemMap] = useMemo(() => {
-    const valueAccessor = accesorFactory(getValue);
-    const labelAccessor = getLabel ? accesorFactory(getLabel) : valueAccessor;
+    const valueAccessor = accesorFactory<T, string>(getValue);
+    const labelAccessor = getLabel ? accesorFactory<T, string>(getLabel) : valueAccessor;
 
     const list = items.map(item => ({
       label: labelAccessor(item),
@@ -78,7 +81,7 @@ export const SelectObject = forwardRef(function <T>(
 });
 
 /** */
-export function SelectWithButtons<T>(props: {
+export function SelectWithButtons<T extends SelectItem>(props: {
   getLabel?: PropertyAccesor<T>;
   getValue?: PropertyAccesor<T>;
   hidden?: boolean;
@@ -121,8 +124,8 @@ export function SelectWithButtons<T>(props: {
   return (
     buttons || (
       <SelectObject
-        getLabel={props.getLabel}
-        getValue={props.getValue}
+        getLabel={props.getLabel ? accesorFactory(props.getLabel) : undefined}
+        getValue={props.getValue ? accesorFactory(props.getValue) : undefined}
         hidden={props.hidden}
         items={items}
         label={props.label}

diff --git a/src/components/SelectCubes.tsx b/src/components/SelectCubes.tsx
@@ -31,24 +31,24 @@ export const EMPTY_RESPONSE = {
   page: {offset: 0, limit: 0, total: 0}
 };
 
-export function SelectCube() {
+export function SelectCube({locale}: {locale: string}) {
   const items = useSelector(selectOlapCubeItems);
   const selectedItem = useSelector(selectOlapCube);
 
   if (items.length === 1) {
     return null;
   }
 
-  return <SelectCubeInternal items={items} selectedItem={selectedItem} />;
+  return <SelectCubeInternal items={items} selectedItem={selectedItem} locale={locale} />;
 }
 
 function SelectCubeInternal(props: {
   items: TesseractCube[];
   selectedItem: TesseractCube | undefined;
+  locale: string;
 }) {
   const {measuresActive} = useSettings();
-  const {items, selectedItem} = props;
-  const {code: locale} = useSelector(selectLocale);
+  const {items, selectedItem, locale} = props;
   const {updateMeasure, updateDrilldown, willFetchMembers, updateCut} = useActions();
   const cutItems = useSelector(selectCutItems);
 

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
@@ -38,13 +38,13 @@ type SidebarProviderProps = {
 export const [useSideBar, Provider] =
   createContext<PropsWithChildren<SidebarProviderProps>>("SideBar");
 
-export function SideBarProvider(props: PropsWithChildren<{}>) {
+export function SideBarProvider(props: PropsWithChildren<{locale: string}>) {
   const [input, setInput] = useDebouncedState<string>("", 200);
   const [expanded, setExpanded] = useState<boolean>(true);
 
-  const graph = useBuildGraph();
+  const graph = useBuildGraph(props.locale);
   const {results, map} = useCubeSearch(input, graph);
-
+  
   return (
     <Provider
       {...props}
@@ -153,7 +153,6 @@ function SideBar(props: PropsWithChildren<SidebarProps>) {
                   <Text sx={t => ({color: t.colorScheme === "dark" ? t.white : t.black})} ml={"sm"}>
                     {t("params.label_dataset")}
                   </Text>
-                  <LocaleSelector />
                 </Group>
               </Flex>
               <Box

diff --git a/src/components/TableFooter.tsx b/src/components/TableFooter.tsx
@@ -15,6 +15,7 @@ import {selectLoadingState} from "../state/loading";
 import {SelectObject} from "./Select";
 import type {FileDescriptor} from "../utils/types";
 import CubeSource from "./CubeSource";
+import { LocaleSelector } from "./LocaleSelector";
 
 const formatter = new Intl.NumberFormat("en-US", {
   maximumFractionDigits: 0
@@ -61,6 +62,7 @@ function TableFooter(props: Props) {
         <CubeSource />
         {!loading.loading && !isLoading && (
           <Group position="right" spacing="sm">
+            <LocaleSelector />
             <Box maw="7rem" miw={"fit"}>
               <SelectObject
                 getValue={(item: Item) => item.value}