feat: add content tab

package.json

@@ -34,6 +34,7 @@
     "@mui/x-charts": "^6.18.4",
     "construct-style-sheets-polyfill": "3.1.0",
     "date-fns": "^3.0.6",
+    "moment": "^2.30.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-json-tree": "^0.18.0",

src/models/entity.ts

@@ -0,0 +1,97 @@
+export interface Identity {
+  data: any;
+  // entity is just a map[string]object
+  entity: any;
+  fragments: Fragment[];
+}
+
+export interface Fragment {
+  conflict: boolean;
+  conflicts_with?: string;
+  keys: FragmentKey[];
+  // unimplemented: modified, neighbor_limit, neighbors, streams
+}
+
+export interface FragmentKey {
+  key: string;
+  value: string;
+}
+
+export interface ApiResponse {
+  data: any;
+  error: string;
+  requestId: string;
+}
+
+export interface ContentEntity {
+  created?: string;
+  fetched?: string;
+  updated?: string;
+  description?: string;
+  longDescription?: string;
+  httpstatus?: string;
+  language?: string;
+  primaryImage?: string;
+  url?: string;
+  collections?: string[];
+  // topics are a map[string]number
+  topics?: Record<string, number>;
+}
+
+export const ExtractSortedMap = (m: { [key: string]: number }): { label: string; value: number }[] => {
+  const filteredArray = Object.entries(m)
+    .filter(([key, value]) => key.length > 1 && value > 0)
+    .map(([key, value]) => ({ label: key, value }));
+
+  // Sort the filtered array based on numeric values in decreasing order
+  const sortedArray = filteredArray.sort((a, b) => b.value - a.value);
+
+  // Slice the array to get at most 20 elements
+  return sortedArray.slice(0, 20);
+};
+
+const appendScore = (scoresArray, data, propertyName, label) => {
+  const propertyValue = data?.[propertyName];
+
+  if (propertyValue) {
+    return [
+      ...scoresArray,
+      {
+        label: label,
+        value: propertyValue / 100,
+      },
+    ];
+  }
+
+  return scoresArray;
+};
+
+const extractScores = (data: any, scoreNames: [string, string][]) => {
+  let updatedScores = [];
+  for (const [propertyName, label] of scoreNames) {
+    updatedScores = appendScore(updatedScores, data, propertyName, label);
+  }
+  return updatedScores;
+};
+
+export const ExtractScores = (data: any) => {
+  return extractScores(data, [
+    ['score_consistency', 'Consistency'],
+    ['score_frequency', 'Frequency'],
+    ['score_intensity', 'Intensity'],
+    ['score_maturity', 'Maturity'],
+    ['score_momentum', 'Momentum'],
+    ['score_propensity', 'Propensity'],
+    ['score_quantity', 'Quantity'],
+    ['score_recency', 'Recency'],
+    ['score_volatility', 'Volatility'],
+  ]);
+};
+
+export const ExtractSegments = (data: any, field: string) => {
+  const segmentsArray = data[field];
+  return segmentsArray.reduce((result, segment) => {
+    result[segment] = segment;
+    return result;
+  }, {});
+};

src/pages/background/index.ts

@@ -16,6 +16,7 @@ chrome.tabs.onUpdated.addListener(async (tabId, info, tab) => {
     path: 'src/pages/sidepanel/index.html',
     enabled: true,
   });
+  chrome.runtime.sendMessage({ source: 'runtime', action: 'tabUpdated', url: tab.url });
 });
 
 // --------------------------------------------------------

src/pages/content/ui/app.tsx

@@ -78,6 +78,17 @@ export default function App() {
         EmitLog({ name: 'storage', payload: { msg: 'Entity saved.' } });
       });
     });
+
+    // ------------------------------
+    // Handle Tab Changes
+    // ------------------------------
+    chrome.tabs.onUpdated.addListener(function (tabId, changeInfo) {
+      if (changeInfo.url) {
+        chrome.tabs.sendMessage(tabId, {
+          url: changeInfo.url,
+        });
+      }
+    });
   }, []);
 
   useEffect(() => {}, []);

src/pages/sidepanel/SidePanel.tsx

@@ -15,6 +15,7 @@ import { TagConfigModel, TagConfigPathforaCandidates } from '@root/src/shared/mo
 import Debugger from '@root/src/pages/sidepanel/sections/Debugger';
 import Profile from '@root/src/pages/sidepanel/sections/Profile';
 import Personalization from '@root/src/pages/sidepanel/sections/Personalization';
+import Content from '@root/src/pages/sidepanel/sections/Content';
 import Configuration from '@root/src/pages/sidepanel/sections/Configuration';
 import { EmitLog } from '@src/shared/components/EmitLog';
 
@@ -229,6 +230,7 @@ const SidePanel: React.FC<SidePanelProps> = ({ key, isEnabled }) => {
                   <Personalization candidates={candidates} getter={personalizationTab} setter={setPersonalizationTab} />
                 }
               />
+              <Route path="/content" element={<Content />} />
               <Route
                 path="*"
                 element={

src/pages/sidepanel/components/BarChart.tsx

@@ -0,0 +1,68 @@
+// do all of the imports
+import React from 'react';
+import { Box, LinearProgress, Stack, Typography } from '@mui/material';
+
+import { makeStyles } from '@mui/styles';
+
+interface BarStylesProps {
+  backgroundGradient: string;
+}
+
+const barStyles = makeStyles(() => ({
+  linearProgress: ({ backgroundGradient }: BarStylesProps) => ({
+    background: '#DCDCEA',
+    borderRadius: '2px',
+    '& .MuiLinearProgress-bar': {
+      background: backgroundGradient,
+    },
+  }),
+}));
+
+interface CustomBarChartProps {
+  data: { label: string; value: number }[];
+  color1?: string;
+  color2?: string;
+}
+
+const CustomBarChart: React.FC<CustomBarChartProps> = ({ data, color1, color2 }: CustomBarChartProps) => {
+  const classes = barStyles({
+    backgroundGradient: `linear-gradient(75deg, ${color1 || '#6C31B8'} 60%, ${color2 || '#AB32DE'} 100%)`,
+  });
+
+  const truncateString = (str, maxLength) => {
+    if (str.length > maxLength) {
+      return str.substring(0, maxLength) + '...';
+    }
+    return str;
+  };
+
+  return (
+    <Stack spacing={0.5}>
+      {data.map((item, index) => (
+        <Stack key={index} spacing={1} direction={'row'} ml={1} mr={1}>
+          <Box
+            sx={{
+              width: '200px',
+              borderRadius: '2px',
+              // background: 'linear-gradient(90deg, rgba(255, 255, 255, 0) 80%, #D8D8E5 100%)',
+            }}>
+            <Typography variant="body2" sx={{ fontSize: 12, textAlign: 'right' }}>
+              {truncateString(item.label, 20)}
+            </Typography>
+          </Box>
+          <LinearProgress
+            variant="determinate"
+            value={Math.round(item.value * 100)}
+            sx={{
+              width: '100%',
+              height: '1rem',
+            }}
+            className={classes.linearProgress}
+          />
+        </Stack>
+      ))}
+    </Stack>
+  );
+};
+
+export default CustomBarChart;

src/pages/sidepanel/components/BottomNavigation.tsx

@@ -4,6 +4,7 @@ import BottomNavigationAction from '@mui/material/BottomNavigationAction';
 import Plumbing from '@mui/icons-material/Plumbing';
 import Person from '@mui/icons-material/Person';
 import Brush from '@mui/icons-material/Brush';
+import Description from '@mui/icons-material/Description';
 
 interface BottomNavProps {
   value: string;
@@ -54,6 +55,17 @@ const BottomNav: React.FC<BottomNavProps> = ({ value, tagIsInstalled, onChange }
           },
         }}
       />
+      <BottomNavigationAction
+        label="Content"
+        value="/content"
+        disabled={!tagIsInstalled}
+        icon={<Description />}
+        sx={{
+          '&.Mui-selected': {
+            color: 'secondary.main',
+          },
+        }}
+      />
     </BottomNavigation>
   );
 };

src/pages/sidepanel/components/SimpleTable.tsx

@@ -4,7 +4,8 @@ import { Grid, Divider, Typography } from '@mui/material';
 interface TableRow {
   label: string;
   position?: string;
-  value?: string;
+  // value is optional and can be a string or a ReactNode
+  value?: string | React.ReactNode;
   fancyValue?: React.ReactNode;
 }