update components to use locale

Datawheel · Jul 15, 2024 · 890eeb6 · 890eeb6
1 parent 0dac204
commit 890eeb6
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 28 deletions.
diff --git a/src/components/ParamsExplorer.tsx b/src/components/ParamsExplorer.tsx
@@ -8,12 +8,12 @@ type Props = {};
 function ParamsExplorer(props: Props) {
   const {} = props;
   return (
-    <Box>
-      <Box mb="md">
+    <>
+      <Box mb="xl">
         <SelectLocale />
       </Box>
       <SelectCube />
-    </Box>
+    </>
   );
 }
 

diff --git a/src/components/SelectCubes.tsx b/src/components/SelectCubes.tsx
@@ -118,7 +118,6 @@ function SelectCubeInternal(props: {items: PlainCube[]; selectedItem: PlainCube
   );
 }
 
-// check accordion
 function AccordionControl(props: AccordionControlProps) {
   return (
     <Box sx={{display: "flex", alignItems: "center"}}>
@@ -169,8 +168,8 @@ function getCube(items: AnnotatedCube[], table: string, subtopic: string, locale
   return cube;
 }
 
-function useBuildGraph(items, locale) {
-  const [graph, setGraph] = useState<Graph>(new Graph());
+function useBuildGraph(items, locale, graph, setGraph) {
+  // const [graph, setGraph] = useState<Graph>(new Graph());
 
   useEffect(() => {
     const graph = new Graph();
@@ -204,13 +203,8 @@ function CubeTree({
   selectedItem?: PlainCube;
 }) {
   const {graph, setGraph, map} = useSideBar();
-  const {graph: graphInit} = useBuildGraph(items, locale);
+  useBuildGraph(items, locale, graph, setGraph);
   const actions = useActions();
-
-  useEffect(() => {
-    graphInit && setGraph(graphInit);
-  }, [graphInit, setGraph, locale]);
-
   const onSelectCube = (table: string, subtopic: string) => {
     const cube = items.find(
       item =>
@@ -262,7 +256,6 @@ function useAccordionValue(key: Keys, locale) {
 }
 
 function RootAccordions({items, graph, locale, selectedItem, onSelectCube}) {
-  console.log(items, "items");
   const {value, setValue} = useAccordionValue("topic", locale);
   return (
     <Accordion
@@ -362,7 +355,6 @@ function SubtopicAccordion({
   selectedItem,
   locale
 }: PropsWithChildren<NestedAccordionType>) {
-  console.log(items, "Sub");
   const {value, setValue} = useAccordionValue("subtopic", locale);
   return (
     <Accordion

diff --git a/src/components/SelectLocale.tsx b/src/components/SelectLocale.tsx
@@ -7,13 +7,14 @@ import {useTranslation} from "../hooks/translation";
 import {selectLocale} from "../state/queries";
 import {selectServerState} from "../state/server";
 import {SelectObject} from "./Select";
+import {useSideBar} from "./SideBar";
 
-type LocaleOptions = {label: string, value: LanguageCode};
+type LocaleOptions = {label: string; value: LanguageCode};
 
 /** */
 export function SelectLocale() {
   const actions = useActions();
-
+  const {resetGraph} = useSideBar();
   const {translate: t, locale} = useTranslation();
 
   const {code: currentCode} = useSelector(selectLocale);
@@ -22,17 +23,19 @@ export function SelectLocale() {
   const options: LocaleOptions[] = useMemo(() => {
     const languages = ISO6391.getLanguages(localeOptions);
     return languages.map(lang => ({
-      label: t("params.label_localeoption", {
-        code: lang.code,
-        engName: lang.name,
-        nativeName: lang.nativeName,
-        customName: t(`params.label_localecustom_${lang.code}`)
-      }) || lang.nativeName,
+      label:
+        t("params.label_localeoption", {
+          code: lang.code,
+          engName: lang.name,
+          nativeName: lang.nativeName,
+          customName: t(`params.label_localecustom_${lang.code}`)
+        }) || lang.nativeName,
       value: lang.code
     }));
   }, [locale, localeOptions]);
 
   const localeChangeHandler = useCallback((locale: LocaleOptions) => {
+    resetGraph();
     actions.updateLocale(locale.value);
   }, []);
 

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
@@ -8,7 +8,6 @@ import Graph from "../utils/graph";
 import {useSelector} from "react-redux";
 import {getKeys} from "./SelectCubes";
 import {AnnotatedCube} from "./SelectCubes";
-import {SelectLocale} from "./SelectLocale";
 
 type SidebarProviderProps = {
   expanded: boolean;
@@ -21,17 +20,23 @@ type SidebarProviderProps = {
   setInput: React.Dispatch<React.SetStateAction<string>>;
   map: Map<string, string[]> | undefined;
   setMap: React.Dispatch<React.SetStateAction<Map<string, string[]> | undefined>>;
+  resetGraph: () => void;
 };
 
 export const [useSideBar, Provider] =
   createContext<PropsWithChildren<SidebarProviderProps>>("SideBar");
 
 export function SideBarProvider(props: PropsWithChildren<{}>) {
+  const {code: locale} = useSelector(selectLocale);
   const [input, setInput] = useState<string>("");
   const [expanded, setExpanded] = useState<boolean>(false);
   const [results, setResults] = useState<string[]>([]);
   const [map, setMap] = useState<Map<string, string[]>>();
   const [graph, setGraph] = useState(new Graph());
+  const resetGraph = () => {
+    console.log("me llama");
+    setGraph(new Graph());
+  };
 
   return (
     <Provider
@@ -46,7 +51,8 @@ export function SideBarProvider(props: PropsWithChildren<{}>) {
         input,
         map,
         setMap,
-        setInput
+        setInput,
+        resetGraph
       }}
     />
   );
@@ -61,7 +67,7 @@ function SideBar(props: PropsWithChildren<SidebarProps>) {
     <Box
       p="md"
       sx={t => ({
-        height: "calc(100vh - 80px)",
+        height: "calc(100vh - 90px)",
         border: "1px solid",
         backgroundColor: t.colors.gray[2],
         borderColor: t.colors.gray[1],

diff --git a/src/components/TableView.tsx b/src/components/TableView.tsx
@@ -24,7 +24,6 @@ import {selectCurrentQueryParams} from "../state/queries";
 import {useSelector} from "react-redux";
 import {PlainCube, PlainLevel, PlainMeasure, PlainProperty} from "@datawheel/olap-client";
 import {ViewProps} from "../utils/types";
-import {isNumeric} from "../utils/validation";
 import OptionsMenu from "./OptionsMenu";
 import {
   IconSortAscendingLetters as SortAsc,
@@ -498,8 +497,8 @@ export function TableView({table}: TableView) {
                           component="th"
                           key={header.id}
                           sx={theme => ({
-                            // backgroundColor: getEntityColor(column.columnDef.entityType, theme),
-                            backgroundColor: "white",
+                            backgroundColor: theme.colors.gray[0],
+                            // backgroundColor: "white",
                             align: isNumeric ? "right" : "left",
                             height: 140,
                             paddingBottom: 15,