Skip to content

Commit bab5841

Browse files
haraldeharalde
committed
Convert to json records format in backend and use generic table component
1 parent 7ab493f commit bab5841

4 files changed

Lines changed: 39 additions & 74 deletions

File tree

‎backend/src/acidwatch_api/models/arcs.py‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,28 @@ async def run(self) -> RunResult:
8484
)
8585

8686
result = response.json()
87+
paths = result["analysis"]["common_paths"]
88+
stats = result["analysis"]["stats"]
89+
common_paths = [
90+
{
91+
"Path": v.replace("<sub>", "").replace("</sub>", ""),
92+
"k": paths["k"][k],
93+
"Frequency": paths["frequency"][k],
94+
}
95+
for k, v in paths["paths"].items()
96+
]
97+
all_stats = [
98+
{
99+
"Path": v,
100+
"k": stats["k"][k],
101+
"Frequency": stats["frequency"][k],
102+
}
103+
for k, v in stats["index"].items()
104+
]
105+
87106
return {
88107
k: v * 1e6 for k, v in result["results"]["final_concs"].items()
89108
}, ReactionPathsResult(
90-
common_paths=result["analysis"]["common_paths"],
91-
stats=result["analysis"]["stats"],
109+
common_paths=common_paths,
110+
stats=all_stats,
92111
)

‎frontend/src/components/GenericTable.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import { Table } from "@equinor/eds-core-react";
3-
3+
import { convertToSubscripts } from "../functions/Formatting";
44
interface GenericTableProps {
55
data: Record<string, any>[];
66
}
@@ -15,20 +15,16 @@ const GenericTable: React.FC<GenericTableProps> = ({ data }) => {
1515
<Table.Head>
1616
<Table.Row>
1717
{columns.map((col) => (
18-
<Table.Cell key={col}>{col}</Table.Cell>
18+
<Table.Cell>{col}</Table.Cell>
1919
))}
2020
</Table.Row>
2121
</Table.Head>
2222
<Table.Body>
23-
{data.map((row, idx) => (
24-
<Table.Row key={idx}>
23+
{data.map((row) => (
24+
<Table.Row>
2525
{columns.map((col) => (
26-
<Table.Cell key={col}>
27-
{typeof row[col] === "number"
28-
? Math.abs(row[col]) < 0.001
29-
? "-"
30-
: row[col].toFixed(2)
31-
: (row[col] ?? "-")}
26+
<Table.Cell key={col} style={{ whiteSpace: "pre-line" }}>
27+
{typeof row[col] === "string" ? convertToSubscripts(row[col]) : row[col]}
3228
</Table.Cell>
3329
))}
3430
</Table.Row>

‎frontend/src/functions/Formatting.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import { SimulationResults } from "../dto/SimulationResults";
22
import { ChartDataSet, TabulatedResultRow } from "../dto/ChartData";
33
import { ExperimentResult } from "../dto/ExperimentResult";
4-
export const removeSubsFromString = (s: string): string => {
5-
s = s.replace(/<sub>/g, "");
6-
s = s.replace(/<\/sub>/g, "");
7-
return s;
8-
};
94

105
export const convertToSubscripts = (chemicalFormula: string): React.ReactNode => {
116
const regex = /(?<=\p{L})\d|(?=\p{L})\d/gu;

‎frontend/src/pages/Reactions.tsx‎

Lines changed: 12 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import React, { useState } from "react";
2-
import { Button, Table, Typography } from "@equinor/eds-core-react";
3-
import { convertToSubscripts, removeSubsFromString } from "../functions/Formatting";
2+
import { Button, Typography } from "@equinor/eds-core-react";
43

5-
const Reactions: React.FC<{ commonPaths: any; reactions: any }> = ({ commonPaths, reactions }) => {
4+
import GenericTable from "../components/GenericTable";
5+
const Reactions: React.FC<{ commonPaths: any; reactions: Record<string, any> }> = ({ commonPaths, reactions }) => {
66
const [isReactionsLimited, setIsReactionsLimited] = useState<boolean>(true);
77
const reactionLimit = 5;
8-
8+
const displayedReactions: Record<string, any>[] = reactions
9+
? isReactionsLimited
10+
? Object.values(reactions).slice(0, reactionLimit)
11+
: Object.values(reactions)
12+
: [];
913
const handleShowMoreLessReactions = () => {
1014
setIsReactionsLimited(!isReactionsLimited);
1115
};
@@ -14,30 +18,10 @@ const Reactions: React.FC<{ commonPaths: any; reactions: any }> = ({ commonPaths
1418
<Typography variant="h5" style={{ marginTop: "1rem" }}>
1519
Most frequent reactions
1620
</Typography>
17-
18-
{reactions && Object.keys(reactions).length > 0 ? (
21+
{reactions ? (
1922
<>
20-
<Table>
21-
<Table.Head>
22-
<Table.Row>
23-
<Table.Cell>Reaction</Table.Cell>
24-
<Table.Cell>k</Table.Cell>
25-
<Table.Cell>Frequency</Table.Cell>
26-
</Table.Row>
27-
</Table.Head>
28-
<Table.Body>
29-
{Object.keys(reactions.index)
30-
.filter((key) => Number(key) < reactionLimit || !isReactionsLimited)
31-
.map((key, index) => (
32-
<Table.Row key={index}>
33-
<Table.Cell>{convertToSubscripts(reactions.index[key])}</Table.Cell>
34-
<Table.Cell>{reactions.k[key]}</Table.Cell>
35-
<Table.Cell>{reactions.frequency[key]}</Table.Cell>
36-
</Table.Row>
37-
))}
38-
</Table.Body>
39-
</Table>
40-
{Object.keys(reactions.index).length > reactionLimit && (
23+
<GenericTable data={displayedReactions} />
24+
{Object.keys(reactions).length > reactionLimit && (
4125
<Button variant="ghost" onClick={() => handleShowMoreLessReactions()}>
4226
{isReactionsLimited ? "Show more" : "Show less"}
4327
</Button>
@@ -51,36 +35,7 @@ const Reactions: React.FC<{ commonPaths: any; reactions: any }> = ({ commonPaths
5135
Most frequent paths
5236
</Typography>
5337

54-
{commonPaths.paths && commonPaths.paths[0] !== null ? (
55-
<Table>
56-
<Table.Head>
57-
<Table.Row>
58-
<Table.Cell>Path</Table.Cell>
59-
<Table.Cell>k</Table.Cell>
60-
<Table.Cell>Frequency</Table.Cell>
61-
</Table.Row>
62-
</Table.Head>
63-
<Table.Body>
64-
{Object.keys(commonPaths.paths).map((key) => {
65-
const pathReactions: string[] = commonPaths.paths[key].split("\n");
66-
const kValues = commonPaths.k[key].split("\n");
67-
return pathReactions.map((reaction, reactionIndex) => (
68-
<Table.Row key={`${key}-${reactionIndex}`}>
69-
<Table.Cell>{convertToSubscripts(removeSubsFromString(reaction))}</Table.Cell>
70-
<Table.Cell>{kValues[reactionIndex]}</Table.Cell>
71-
{reactionIndex === 0 && (
72-
<Table.Cell rowSpan={pathReactions.length}>
73-
{commonPaths.frequency[key]}
74-
</Table.Cell>
75-
)}
76-
</Table.Row>
77-
));
78-
})}
79-
</Table.Body>
80-
</Table>
81-
) : (
82-
<Typography>No paths available.</Typography>
83-
)}
38+
{commonPaths ? <GenericTable data={commonPaths} /> : <Typography>No paths available.</Typography>}
8439
</div>
8540
);
8641
};

0 commit comments

Comments
 (0)