Styling Feature

Co-authored-by: jwagner988 jwagner988@gmail.com Co-authored by: vincent114 Vincent.trang1@gmail.com Co-authored by: mimiwrp mimiwirapa@gmail.com Co-authored by: ericJH92 eric.j.h92@gmail.com

Author: JuiceBawks

frontend/components/views/CompareView/CompareChart.tsx

@@ -35,18 +35,19 @@ const getChartData = (
  const comparedQueries = Object.values(queries);
 
  // unique query labels
- const groupLabels = [...new Set(comparedQueries.map((query) => `label:${query.label} db:${query.db} group:${query.group}`))];
+ const uniqueLabels = [...new Set(comparedQueries.map((query) => `label:${query.label} db:${query.db} group:${query.group}`))];
  const labels = [...new Set(comparedQueries.map((query) => query.group))];
 
  // unique dbs in comparison
  const comparedDbs = [...new Set(comparedQueries.map((query) => query.db))];
 
+ //Algorithm for grouping speeds by group
  const groups:object = {};
- for (let i = 0; i < groupLabels.length; i++) {
- if (groups[queries[groupLabels[i]].db]) {
- groups[queries[groupLabels[i]].db].push(getTotalTime(queries[groupLabels[i]]));
+ for (let i = 0; i < uniqueLabels.length; i++) {
+ if (groups[queries[uniqueLabels[i]].db]) {
+ groups[queries[uniqueLabels[i]].db].push(getTotalTime(queries[uniqueLabels[i]]));
  } else {
- groups[queries[groupLabels[i]].db] = [getTotalTime(queries[groupLabels[i]])];
+ groups[queries[uniqueLabels[i]].db] = [getTotalTime(queries[uniqueLabels[i]])];
  };
  };
 
@@ -58,12 +59,11 @@ const getChartData = (
  backgroundColor: color,
  borderColor: color,
  borderWidth: 1,
- // array with values for each label. If db doesn't have a query with a
+ // array with values for each group. If group doesn't have a query with a
  // given label being compared, set it's value to
  data: groups[db],
  };
  });
- console.log(labels, datasets)
 
  return { labels, datasets };
 };
@@ -77,6 +77,7 @@ const CompareChart = ({ queries }: CompareChartProps) => (
  <Bar
  data={getChartData(queries)}
  options={{
+
  title: {
  display: true,
  text: 'QUERY GROUP VS RUNTIME (ms)',
@@ -94,6 +95,13 @@ const CompareChart = ({ queries }: CompareChartProps) => (
  }],
  },
  maintainAspectRatio: false,
+ // tooltips: {
+ // callbacks: {
+ // label: function(data) {
+ // return `${Object.keys(data)} THIS IS THE OTHER THING: ${data.index}`
+ // }
+ // }
+ // },
  }}
  />
  </ChartContainer>

frontend/components/views/CompareView/CompareTable.tsx

@@ -31,7 +31,7 @@ const StyledCell = styled(TableCell)<{
 `;
 
 const FastestMarker = () => (
- <Tooltip title="Fastest Query in label group">
+ <Tooltip title="Fastest Query in group">
  <SpeedIcon style={{ margin: 0 }} />
  </Tooltip>
 );
@@ -50,6 +50,7 @@ type InfoColumn = [
 
 // Array of columns names and transformers that receive query and return printable value
 const tableInfo: InfoColumn[] = [
+ ['Group', 'left', (q: QueryData) => q.group],
  ['Label', 'left', (q: QueryData) => q.label],
  ['Database', 'left', (q: QueryData) => q.db],
  ['Timing', 'right', getPrettyTime],
@@ -67,7 +68,7 @@ const getFastestPerGroup = (queries: QueryData[]) =>
  queries.reduce<Record<string, number>>(
  (acc, q) => ({
  ...acc,
- [q.label]: Math.min(acc[q.label] ?? Infinity, getTotalTime(q)),
+ [q.group]: Math.min(acc[q.group] ?? Infinity, getTotalTime(q)),
  }),
  {}
  );
@@ -77,8 +78,8 @@ const analyze = (queries: QueryData[]): AnalysedQuery[] => {
  const fastest = getFastestPerGroup(queries);
  return queries.map((q) => ({
  ...q,
- relativeSpeed: getTotalTime(q) / fastest[q.label],
- isFastest: fastest[q.label] === getTotalTime(q),
+ relativeSpeed: getTotalTime(q) / fastest[q.group],
+ isFastest: fastest[q.group] === getTotalTime(q),
  }));
 };
 
@@ -110,11 +111,11 @@ const CompareTable = ({ queries }: CompareTableProps) => {
  </TableHead>
  <TableBody>
  {comparedQueries.map((query: AnalysedQuery) => (
- <TableRow key={query.label + query.db}>
+ <TableRow key={query.label + query.db + query.group}>
  {tableInfo.map(([columnLabel, alignment, transformer]) => (
  <StyledCell
  align={alignment}
- key={`${query.label}_${query.db}_${columnLabel}`}
+ key={`${query.label}_${query.db}_${query.group}_${columnLabel}`}
  $isFastest={query.isFastest}
  $isMarker={!columnLabel}
  >