Fix 118: unified colors in the Studio + add more entity types in Pathways

front/src/components/abstra/abstraTable.js

@@ -16,6 +16,7 @@ import {
 import { styled } from "@mui/material/styles";
 
 import { EntityIcon } from "../../utils/entities";
+import { useLang } from "../../context/Lang";
 
 const ListIconEntity = styled(ListItemIcon)(() => ({
 	marginTop: "auto",
@@ -24,10 +25,25 @@ const ListIconEntity = styled(ListItemIcon)(() => ({
 	marginRight: 15,
 }));
 
-function AbstraHeader({ data }) {
-	let recordLabel = "records";
+const trans = {
+	labelled: {
+		en: "labelled",
+		fr: "nommés",
+	},
+	records: {
+		en: "records",
+		fr: "tuples"
+	},
+	record: {
+		en: "record",
+		fr: "tuple"
+	}
+};
+
+function AbstraHeader({ data, activeLang }) {
+	let recordLabel = trans.records[activeLang];
 	if(data.collection_size === 1) {
-		recordLabel = "record"
+		recordLabel = trans.record[activeLang]
 	}
 	return (
 		<Box sx={{ display: "flex", backgroundColor: data.color, px: 1 }}>
@@ -36,7 +52,7 @@ function AbstraHeader({ data }) {
 			</ListIconEntity>
 			<Box sx={{ my: 0.5 }}>
 				<Typography variant="h6" component="div" fontSize={18}>
-					{data.collection_size} {recordLabel} (labelled "{data.label}")
+					{data.collection_size} {recordLabel} (trans.labelled[activeLang] "{data.label}")
 				</Typography>
 				<Typography fontSize={14} color="text.secondary">
 					{data.categoryLabel}
@@ -48,6 +64,7 @@ function AbstraHeader({ data }) {
 
 function AbstraRow({ row, depth }) {
 	const [open, setOpen] = React.useState(false);
+	const { activeLang } = useLang();
 
 	const handleClick = () => {
 		setOpen(!open);
@@ -94,13 +111,13 @@ function AbstraRow({ row, depth }) {
 	);
 }
 
-function NestedList({ data }) {
+function NestedList({ data, activeLang }) {
 	return (
 		<List
 			sx={{ width: "100%", bgcolor: "background.paper", elevation: 0 }}
 			component="div"
 			disablePadding
-			subheader={<AbstraHeader data={data} />}
+			subheader={<AbstraHeader data={data} activLang={activeLang} />}
 		>
 			<Divider></Divider>
 			{data.rows.map((row, index) => {
@@ -115,10 +132,10 @@ function NestedList({ data }) {
 	);
 }
 
-function AbstraTable({ id, data }) {
+function AbstraTable({ id, data, activLang }) {
 	return (
 		<Box sx={{ p: 0.5, backgroundColor: data.color, borderRadius: "5px" }}>
-			<NestedList data={data}></NestedList>
+			<NestedList data={data} activLang={activLang} ></NestedList>
 			<Handle type="source" id="source-float" />
 			<Handle type="target" id="target-float" />
 			<Handle