fix(taboule): display many Taboule instances in tabs

packages/taboule/package.json

@@ -16,14 +16,10 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/styles": "^4.11.5",
-    "@material-ui/x-license": "^4.0.0-alpha.37",
     "@mui/icons-material": "^5.8.0",
     "@mui/material": "^5.8.0",
     "@mui/styled-engine": "^5.8.0",
-    "@mui/x-data-grid": "^5.11.1",
+    "@mui/x-data-grid": "^5.17.11",
     "avenger": "^7.0.1",
     "axios": "^0.24.0",
     "date-fns": "^2.28.0",

packages/taboule/public/index.html

@@ -13,88 +13,123 @@
     <div>
       <h2>Taboule</h2>
       <div>
+        <div style="display: inline-block">
+          <div id="taboule-show-inputs" style="display: inline">
+            <label>Show Params Inputs</label>
+            <input type="checkbox" checked="true" />
+          </div>
+          <div id="taboule-show-as-tabs">
+            <label>Show As Tabbed</label>
+            <input type="checkbox" />
+          </div>
+        </div>
+
         <select id="taboule-query-value">
-          <option value="YCAIYCAIccRelatedUsers">
+          <option value="YCAIccRelatedUsers">
             YCAI Content creator Related Users
           </option>
-          <option value="youtubePersonalSearches">
-            Youtube Personal Searches
-          </option>
-          <option value="youtubePersonalVideos">Youtube Personal Videos</option>
-          <option value="youtubePersonalHomes">Youtube Personal Homes</option>
-          <option value="youtubePersonalAds">Youtube Personal ADS</option>
+          <option value="youtubePersonalSearches">YT Personal Searches</option>
+          <option value="youtubePersonalVideos">YT Personal Videos</option>
+          <option value="youtubePersonalHomes">YT Personal Homes</option>
+          <option value="youtubePersonalAds">YT Personal ADS</option>
           <option value="youtubeGetExperimentById">
-            Youtube Compare Experiment
-          </option>
-          <option value="youtubeGetExperimentList">
-            Youtube Experiment list
+            YT Compare Experiment
           </option>
+          <option value="youtubeGetExperimentList">YT Experiment list</option>
           <option value="tikTokPersonalHTMLSummary">
-            TikTok Personal HTML Summary
+            TK Personal HTML Summary
           </option>
           <option value="tikTokPersonalSearch">
-            TikTok Personal Metadata: search
+            TK Personal Metadata: search
           </option>
           <option value="tikTokPersonalNative">
-            TikTok Personal Metadata: native
-          </option>
-          <option value="tikTokSearches" selected>
-            TikTok (Collective) Searches
+            TK Personal Metadata: native
           </option>
+          <option value="tikTokPersonalForYou">TK Personal ForYou</option>
+          <option value="tikTokPersonalFollowing">TK Personal Following</option>
         </select>
-        <div id="taboule-show-inputs" style="display: inline">
-          <label>Show Params Inputs</label>
-          <input type="checkbox" checked="true" />
-        </div>
       </div>
       <div id="main"></div>
     </div>
   </body>
   <script type="text/javascript" src="./taboule.js"></script>
   <script type="text/javascript">
-    // var baseURL = 'http://localhost:9000/api/';
-    var baseURL = 'http://localhost:14000/api/';
+    var baseURL = 'http://localhost:9000/api/';
+    // var baseURL = 'http://localhost:14000/api/';
     // var baseURL = 'https://tiktok.tracking.exposed/api/';
     // var baseURL = 'https://youtube.tracking.exposed/api/';
 
     const querySelect = document.querySelector('#taboule-query-value');
     const showInputCheckbox = document.querySelector(
       '#taboule-show-inputs input'
     );
+    const showsAsTabInput = document.querySelector(
+      '#taboule-show-as-tabs input'
+    );
 
-    const runTaboule = (query, showInput = false) => {
+    const getSelectedQueries = () => {
+      const els = querySelect.querySelectorAll('option:checked');
+      return Array.from(els).map((el) => ({
+        value: el.value,
+        label: el.innerHTML,
+      }));
+    };
+
+    const runTaboule = (queries, showInput = false) => {
       window.Taboule({
         showInput: showInput,
         node: document.getElementById('main'),
         baseURL: baseURL,
-        query: query,
         pageSize: 25,
         initialParams: {
           publicKey: 'H7AsuUszehN4qKTj2GYYwNNzkJVqUQBRo2wgKevzeUwx',
         },
+        queries,
       });
     };
 
+    querySelect.setAttribute('multiple', 'true');
+    showsAsTabInput.setAttribute('checked', 'true');
+
     querySelect.addEventListener('change', (e) => {
-      runTaboule(
-        e.target.value,
-        showInputCheckbox.getAttribute('checked') === 'true'
-      );
+      const values = getSelectedQueries();
+      runTaboule(values, showInputCheckbox.getAttribute('checked') === 'true');
     });
 
     showInputCheckbox.addEventListener('change', (e) => {
       const isChecked = e.currentTarget.getAttribute('checked') === 'true';
       e.currentTarget.setAttribute('checked', isChecked ? 'false' : 'true');
-      runTaboule(querySelect.value, !isChecked);
+      runTaboule(getSelectedQueries(), !isChecked);
+    });
+
+    showsAsTabInput.addEventListener('change', (e) => {
+      let isChecked = e.currentTarget.getAttribute('checked') === 'true';
+      e.currentTarget.setAttribute('checked', isChecked ? 'false' : 'true');
+      isChecked = e.currentTarget.getAttribute('checked') === 'true';
+      if (isChecked) {
+        querySelect.setAttribute('multiple', 'true');
+      } else {
+        querySelect.removeAttribute('multiple');
+      }
     });
 
     console.log(
       'show input checked?',
       showInputCheckbox.getAttribute('checked')
     );
-    runTaboule(
-      querySelect.value,
-      showInputCheckbox.getAttribute('checked') === 'true'
-    );
+
+    console.log('show tabs?', showsAsTabInput.getAttribute('checked'));
+
+    ['youtubePersonalSearches', 'youtubePersonalVideos'].forEach((v) => {
+      const option = querySelect.querySelector(`option[value="${v}"]`);
+      option?.setAttribute('checked', 'true');
+    });
+
+    setTimeout(() => {
+      runTaboule(
+        getSelectedQueries(),
+        showInputCheckbox.getAttribute('checked') === 'true'
+      );
+    }, 1000);
   </script>
 </html>

packages/taboule/src/components/ErrorOverlay.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
 import { ErrorBox } from '@shared/components/Error/ErrorBox';
 import * as React from 'react';
 

packages/taboule/src/components/TabPanel.tsx

@@ -0,0 +1,36 @@
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import * as React from 'react';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+export const TabPanel: React.FC<TabPanelProps> = (props) => {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+};
+
+export function a11yProps(index: number): any {
+  return {
+    id: `simple-tab-${index}`,
+    'aria-controls': `simple-tabpanel-${index}`,
+  };
+}

packages/taboule/src/components/TabbedTaboule.tsx

@@ -0,0 +1,55 @@
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import * as React from 'react';
+import { TabouleQueries } from '../state/queries';
+import { Taboule, TabouleProps } from './Taboule';
+import { a11yProps, TabPanel } from './TabPanel';
+
+interface TabbedTabouleProps<Q extends keyof TabouleQueries>
+  extends Omit<TabouleProps<Q>, 'query'> {
+  queries: Array<{
+    label: string;
+    value: Q;
+  }>;
+}
+
+export const TabbedTaboule: React.FC<
+  TabbedTabouleProps<keyof TabouleQueries>
+> = ({ queries: tabs, ...props }) => {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (
+    event: React.SyntheticEvent,
+    newValue: number
+  ): void => {
+    setValue(newValue);
+  };
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs
+          value={value}
+          onChange={handleChange}
+          aria-label="basic tabs example"
+        >
+          {tabs.map((t, i) => (
+            <Tab
+              key={t.value}
+              label={t.label}
+              {...a11yProps(i)}
+              style={{ marginLeft: 10, marginR: 10 }}
+            />
+          ))}
+        </Tabs>
+      </Box>
+
+      {tabs.map((t, i) => (
+        <TabPanel key={t.value} value={value} index={i}>
+          <Taboule {...props} query={t.value} />
+        </TabPanel>
+      ))}
+    </Box>
+  );
+};