update app

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

Hide file tree

Showing 6 changed files with 46 additions and 43 deletions.
diff --git a/app/index.tsx b/app/index.tsx
@@ -1,17 +1,12 @@
-import {
-  Explorer,
-  PivotView,
-  TableView,
-  translationDict as explorerTranslation,
-} from "../src/main";
+import {Explorer, PivotView, TableView, translationDict as explorerTranslation} from "../src/main";
 import {MantineProvider} from "@mantine/core";
 import React from "react";
 import {createRoot} from "react-dom/client";
 
 const formatters = {
   Index: n => (typeof n === "number" ? n.toFixed(3) : n || " "),
   "Metric Ton": n => `${n.toFixed()} 📦`,
-  Sheep: n => `🐑 ${n.toFixed()}`,
+  Sheep: n => `🐑 ${n.toFixed()}`
 };
 
 /** @type {import("@mantine/core").MantineThemeOverride} */
@@ -28,14 +23,16 @@ function mount(container) {
   root.render(
     <MantineProvider inherit withNormalizeCSS theme={theme}>
       <Explorer
-        source={process.env.TESSERACT_SERVER}
+        // source={process.env.TESSERACT_SERVER}
+        // source={"https://api.oec.world/tesseract/"}
+        source={"https://api.datasaudi.sa/"}
         formatters={formatters}
         dataLocale="en,ar"
         // height="90vh"
         previewLimit={75}
         panels={[
           {key: "table", label: "Data Table", component: TableView},
-          {key: "matrix", label: "Pivot Table", component: PivotView},
+          {key: "matrix", label: "Pivot Table", component: PivotView}
         ]}
         translations={{en: explorerTranslation}}
         defaultOpenParams="drilldowns"
@@ -44,6 +41,6 @@ function mount(container) {
         withMultiQuery
         withPermalink
       />
-    </MantineProvider>,
+    </MantineProvider>
   );
 }
diff --git a/src/components/ExplorerContent.tsx b/src/components/ExplorerContent.tsx
@@ -1,6 +1,6 @@
-import { useState } from "react";
-import { ServerConfig } from "@datawheel/olap-client";
-import { TranslationContextProps } from "@datawheel/use-translation";
+import {useState} from "react";
+import {ServerConfig} from "@datawheel/olap-client";
+import {TranslationContextProps} from "@datawheel/use-translation";
 import {
   CSSObject,
   Center,
@@ -11,22 +11,22 @@ import {
   Burger,
   useMantineTheme
 } from "@mantine/core";
-import React, { useEffect, useMemo } from "react";
-import { useSelector } from "react-redux";
-import { useSetup } from "../hooks/setup";
-import { useTranslation } from "../hooks/translation";
-import { selectServerState } from "../state/server";
-import { PanelDescriptor } from "../utils/types";
-import { AnimatedCube } from "./AnimatedCube";
-import { ExplorerParams } from "./ExplorerParams";
-import { ExplorerQueries } from "./ExplorerQueries";
-import { ExplorerResults } from "./ExplorerResults";
-import { LoadingOverlay } from "./LoadingOverlay";
-import SideBar, { SideBarProvider, SideBarItem } from "./SideBar";
+import React, {useEffect, useMemo} from "react";
+import {useSelector} from "react-redux";
+import {useSetup} from "../hooks/setup";
+import {useTranslation} from "../hooks/translation";
+import {selectServerState} from "../state/server";
+import {PanelDescriptor} from "../utils/types";
+import {AnimatedCube} from "./AnimatedCube";
+import {ExplorerParams} from "./ExplorerParams";
+import {ExplorerQueries} from "./ExplorerQueries";
+import {ExplorerResults} from "./ExplorerResults";
+import {LoadingOverlay} from "./LoadingOverlay";
+import SideBar, {SideBarProvider, SideBarItem} from "./SideBar";
 import ParamsExplorer from "./ParamsExplorer";
-import { HomeSVG } from "./icons";
+import {HomeSVG} from "./icons";
 
-const useStyles = createStyles((theme, params: { height: CSSObject["height"] }) => ({
+const useStyles = createStyles((theme, params: {height: CSSObject["height"]}) => ({
   container: {
     height: "100%",
     [theme.fn.largerThan("md")]: {
@@ -59,8 +59,9 @@ export function ExplorerContent(props: {
   dataLocale: string[];
   defaultOpenParams: string;
   height: CSSObject["height"];
+  panels: PanelDescriptor[];
   source: ServerConfig;
-  splash?: React.ComponentType<{ translation: TranslationContextProps }>;
+  splash?: React.ComponentType<{translation: TranslationContextProps}>;
   uiLocale: string | undefined;
   withMultiQuery: boolean;
 }) {
@@ -71,7 +72,7 @@ export function ExplorerContent(props: {
   const isSetupDone = useSetup(props.source, props.dataLocale);
   const serverState = useSelector(selectServerState);
 
-  const { classes } = useStyles({ height: props.height });
+  const {classes} = useStyles({height: props.height});
 
   // Monitor the uiLocale param to update the UI on change
   useEffect(() => {
@@ -83,16 +84,16 @@ export function ExplorerContent(props: {
     return SplashComponent ? (
       <SplashComponent translation={translation} />
     ) : (
-      <Center h="100%" sx={{ flex: 1 }}>
+      <Center h="100%" sx={{flex: 1}}>
         <AnimatedCube />
       </Center>
     );
   }, [props.splash]);
 
   return (
     <div className={classes.container}>
-      <Header height={{ base: 50 }} p="md">
-        <div style={{ display: "flex", alignItems: "center", height: "100%", padding: 5 }}>
+      <Header height={{base: 50}} p="md">
+        <div style={{display: "flex", alignItems: "center", height: "100%", padding: 5}}>
           <HomeSVG />
         </div>
       </Header>
@@ -106,7 +107,7 @@ export function ExplorerContent(props: {
           </SideBar>
         </SideBarProvider>
         {/* <LoadingOverlay /> */}
-        <ExplorerResults className={classes.flexCol} splash={splash} />
+        <ExplorerResults className={classes.flexCol} panels={props.panels} splash={splash} />
       </div>
     </div>
   );

diff --git a/src/components/ParamsExplorer.tsx b/src/components/ParamsExplorer.tsx
@@ -1,15 +1,17 @@
 import React from "react";
-import { Box } from "@mantine/core";
-import { SelectLocale } from "./SelectLocale";
-import { SelectCube } from "./SelectCubes";
+import {Box} from "@mantine/core";
+import {SelectLocale} from "./SelectLocale";
+import {SelectCube} from "./SelectCubes";
 
 type Props = {};
 
 function ParamsExplorer(props: Props) {
-  const { } = props;
+  const {} = props;
   return (
     <Box>
-      <SelectLocale />
+      <Box mb="md">
+        <SelectLocale />
+      </Box>
       <SelectCube />
     </Box>
   );

diff --git a/src/components/SelectCubes.tsx b/src/components/SelectCubes.tsx
@@ -209,7 +209,7 @@ function CubeTree({
 
   useEffect(() => {
     graphInit && setGraph(graphInit);
-  }, [graphInit, setGraph]);
+  }, [graphInit, setGraph, locale]);
 
   const onSelectCube = (table: string, subtopic: string) => {
     const cube = items.find(
@@ -222,7 +222,7 @@ function CubeTree({
     }
   };
 
-  const topics = useMemo(() => getKeys(items as AnnotatedCube[], "topic", locale), [items]);
+  const topics = useMemo(() => getKeys(items as AnnotatedCube[], "topic", locale), [items, locale]);
 
   return map && map.size > 0 ? (
     <Results
@@ -256,12 +256,13 @@ function useAccordionValue(key: Keys, locale) {
       const value = getAnnotation(selectedItem, key, locale);
       setValue(`${key}-${value}`);
     }
-  }, [key, selectedItem]);
+  }, [key, selectedItem, locale]);
 
   return {value, setValue};
 }
 
 function RootAccordions({items, graph, locale, selectedItem, onSelectCube}) {
+  console.log(items, "items");
   const {value, setValue} = useAccordionValue("topic", locale);
   return (
     <Accordion
@@ -361,6 +362,7 @@ function SubtopicAccordion({
   selectedItem,
   locale
 }: PropsWithChildren<NestedAccordionType>) {
+  console.log(items, "Sub");
   const {value, setValue} = useAccordionValue("subtopic", locale);
   return (
     <Accordion

diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
@@ -8,6 +8,7 @@ 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;
@@ -60,7 +61,7 @@ function SideBar(props: PropsWithChildren<SidebarProps>) {
     <Box
       p="md"
       sx={t => ({
-        height: "calc(100vh - 50px)",
+        height: "calc(100vh - 80px)",
         border: "1px solid",
         backgroundColor: t.colors.gray[2],
         borderColor: t.colors.gray[1],

diff --git a/src/state/queries.ts b/src/state/queries.ts
@@ -221,7 +221,7 @@ export const queriesSlice = createSlice({
     updateLocale(state, { payload }: Action<string>) {
       const query = state.itemMap[state.current];
       if (payload !== query.params.locale) {
-        query.isDirty = true;
+        // query.isDirty = true;
         query.params.locale = payload;
       }
     },