chore: commit dist

dist/ResultsView.d.ts

@@ -1,11 +1,9 @@
+import type { PropertyHolderSchema } from "@mat3ra/esse/dist/js/types";
 import React from "react";
-interface PropertyResult {
-    name: string;
-    value?: number;
-    units?: string;
-}
+import type { PropertiesProveExtraConfig } from "./types";
 interface ResultsViewProps {
-    results?: PropertyResult[];
+    results?: PropertyHolderSchema["data"][];
+    extraConfig?: PropertiesProveExtraConfig;
 }
 export declare const ResultsView: React.FC<ResultsViewProps>;
 export {};

dist/ResultsView.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { NonScalarsList } from "./components/NonScalarsList";
 import { ScalarsList } from "./components/ScalarsList";
-export const ResultsView = ({ results = [] }) => {
-    return _jsx(ScalarsList, { results: results });
+export const ResultsView = ({ results = [], extraConfig }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(ScalarsList, { results: results }), _jsx(NonScalarsList, { results: results, extraConfig: extraConfig })] }));
 };

dist/components/BandGaps.d.ts

@@ -0,0 +1,9 @@
+import type { BandGapsProperty } from "@mat3ra/prode";
+import { type PropertyComponentProps, PropertyComponent } from "./primitive/PropertyComponent";
+interface BandGapsProps extends PropertyComponentProps {
+    property: BandGapsProperty;
+}
+export declare class BandGaps extends PropertyComponent<BandGapsProps> {
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export {};

dist/components/BandGaps.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import { BandGap } from "./include/BandGap";
+import { EigenvaluesAtKpoint } from "./include/EigenvaluesAtKpoint";
+import { PropertyComponent } from "./primitive/PropertyComponent";
+export class BandGaps extends PropertyComponent {
+    render() {
+        const property = this.props.property;
+        const { eigenvalues = [], values = [] } = property;
+        const spins = new Set(values.map((gap) => gap.spin || 0));
+        return (_jsxs(Box, { p: 4, children: [_jsxs(Box, { className: "band-gaps", children: [_jsx(Typography, { variant: "subtitle2", color: "text.primary", children: "Band gap" }), _jsx(Grid, { container: true, spacing: 3, children: values.map((gap, idx) => {
+                                return (_jsx(Grid, { item: true, p: 1, xs: 12, lg: 6, children: _jsx(BandGap, { data: gap, showSpin: spins.size > 1 }) }, `${idx}-${gap.value}`));
+                            }) })] }), Boolean(eigenvalues && eigenvalues.length) && (_jsx(Box, { p: 2, sx: { overflow: "auto" }, children: _jsx(EigenvaluesAtKpoint, { data: eigenvalues }) }))] }));
+    }
+}

dist/components/ConvergencesList.d.ts

@@ -0,0 +1,9 @@
+import type { PropertyHolderSchema } from "@mat3ra/esse/dist/js/types";
+import { ReactElement } from "react";
+interface ConvergencesListProps {
+    idPrefix: string;
+    monitors?: PropertyHolderSchema["data"][];
+    idGenerator?: () => string;
+}
+export declare function ConvergencesList({ idPrefix, monitors, idGenerator, }: ConvergencesListProps): ReactElement;
+export {};

dist/components/ConvergencesList.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PropertyFactory } from "@mat3ra/prode";
+import s from "underscore.string";
+import { Chart } from "./primitive/Chart";
+export function ConvergencesList({ idPrefix, monitors = [], idGenerator, }) {
+    const convergencePropertyNames = PropertyFactory.getConvergencePropertyNames();
+    const monitorComponents = monitors
+        .filter((monitor) => convergencePropertyNames.includes(monitor.name))
+        .map((monitor) => {
+        const property = PropertyFactory.createProperty(monitor);
+        const config = property.chartConfig;
+        const propertyId = s.slugify(idPrefix + " " + monitor.name);
+        return (_jsx(Chart, { config: config, title: s.humanize(monitor.name), idGenerator: idGenerator }, propertyId));
+    });
+    return (_jsx("div", { className: "convergences-list", children: monitorComponents.length > 0 ? (_jsx("div", { className: "col-xs-12 p-l-0 p-r-0", children: monitorComponents })) : null }));
+}

dist/components/DielectricTensor.d.ts

@@ -0,0 +1,4 @@
+import type { DielectricTensorProperty } from "@mat3ra/prode";
+export declare function DielectricTensor({ property }: {
+    property: DielectricTensorProperty;
+}): import("react/jsx-runtime").JSX.Element;

dist/components/DielectricTensor.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Chart } from "./primitive/Chart";
+// TODO: migrate to use generic data type class instead
+export function DielectricTensor({ property }) {
+    const { name, chartConfig } = property;
+    const configs = chartConfig || [];
+    return (_jsx(_Fragment, { children: configs.map((config, index) => {
+            const key = `${name}-${index}`;
+            return _jsx(Chart, { config: config, title: name }, key);
+        }) }));
+}

dist/components/FileContent.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement } from "react";
+import type { PropertiesProveExtraConfig } from "../types";
+import { PropertyComponent } from "./primitive/PropertyComponent";
+interface FileContentProps {
+    data?: any;
+    extraConfig?: PropertiesProveExtraConfig;
+}
+interface FileContentState {
+    fileName: string;
+    fileUrl: string;
+    fileContent: string | any[];
+}
+export declare class FileContent extends PropertyComponent<FileContentProps> {
+    state: FileContentState;
+    componentDidMount(): void;
+    private isFileType;
+    get isImageFile(): boolean;
+    get isCSVFile(): boolean;
+    get isTextFile(): boolean;
+    render(): ReactElement;
+}
+export {};

dist/components/FileContent.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { PropertyComponent } from "./primitive/PropertyComponent";
+export class FileContent extends PropertyComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            fileName: "",
+            fileUrl: "",
+            fileContent: "",
+        };
+        this.isFileType = (filetype) => {
+            return this.props.data && this.props.data.filetype && this.props.data.filetype === filetype;
+        };
+    }
+    componentDidMount() {
+        const { getFileContent } = this.props.extraConfig || {};
+        if (getFileContent) {
+            getFileContent(this.props.data, (contents, fileMetadata) => {
+                this.setState({
+                    fileName: fileMetadata.key.split("/").pop() || "",
+                    fileUrl: fileMetadata.signedUrl,
+                    fileContent: contents,
+                });
+            });
+        }
+    }
+    get isImageFile() {
+        return this.isFileType("image");
+    }
+    get isCSVFile() {
+        return this.isFileType("csv");
+    }
+    get isTextFile() {
+        return this.isFileType("text");
+    }
+    render() {
+        const { DataGridComponent } = this.props.extraConfig || {};
+        return (_jsxs(Box, { className: "FileContent", p: 4, children: [_jsx(Typography, { variant: "subtitle2", color: "text.primary", className: "FileContent-name", children: this.state.fileName }), _jsxs(Box, { mt: 1, className: "file-content-container", children: [this.isImageFile && (_jsx("img", { style: { maxWidth: "100%" }, src: this.state.fileUrl, alt: "" })), this.isTextFile && (_jsx("pre", { className: "file-preview", children: this.state.fileContent })), this.isCSVFile &&
+                            (Array.isArray(this.state.fileContent) && DataGridComponent ? (_jsx(DataGridComponent, { data: this.state.fileContent })) : (_jsx("pre", { className: "file-preview", children: this.state.fileContent })))] })] }));
+    }
+}

dist/components/HubbardU.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+interface HubbardUProps {
+    property: any;
+}
+export declare function HubbardU({ property }: HubbardUProps): ReactElement;
+export {};

dist/components/HubbardU.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
+export function HubbardU({ property }) {
+    const { values = [] } = property;
+    const headers = ["Site no.", "Atomic species (new label)", "Orbital/manifold", "U (eV)"];
+    return (_jsxs(Box, { p: 4, sx: { overflow: "scroll" }, children: [_jsx(Typography, { variant: "subtitle2", color: "text.primary", children: "Hubbard U parameters" }), _jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: headers.map((item, idx) => {
+                                const key = `hubbard-header-${idx}`;
+                                return _jsx(TableCell, { children: item }, key);
+                            }) }) }), _jsx(TableBody, { children: values.map((row, idx) => {
+                            const key = `hubbard-${idx}`;
+                            return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: row.id }), _jsxs(TableCell, { children: [row.atomicSpecies, " (", row.newLabel, ")"] }), _jsx(TableCell, { children: row.orbitalName }), _jsx(TableCell, { children: row.value })] }, key));
+                        }) })] })] }));
+}

dist/components/HubbardV.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+interface HubbardVProps {
+    property: any;
+}
+export declare function HubbardV({ property }: HubbardVProps): ReactElement | null;
+export {};

dist/components/HubbardV.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
+export function HubbardV({ property }) {
+    let { values = [] } = property;
+    // filter out empty objects from the array e.g., [{}] => []
+    values = values.filter((item) => Object.keys(item).length !== 0);
+    const headers = [
+        "Site no. 1",
+        "Atom 1",
+        "Orbital 1",
+        "Site no. 2",
+        "Atom 2",
+        "Orbital 2",
+        "Distance (Bohr)",
+        "V (eV)",
+    ];
+    return values.length > 0 ? (_jsxs(Box, { p: 4, sx: { overflow: "scroll" }, children: [_jsx(Typography, { variant: "subtitle2", color: "text.primary", children: "Hubbard V parameters (all neighbors in 3x3x3 supercell)" }), _jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: headers.map((item, idx) => {
+                                const key = `hubbard-v-header-${idx}`;
+                                return _jsx(TableCell, { children: item }, key);
+                            }) }) }), _jsx(TableBody, { children: values.map((row, idx) => {
+                            const key = `hubbard-v-${idx}`;
+                            return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: row.id }), _jsx(TableCell, { children: row.atomicSpecies }), _jsx(TableCell, { children: row.orbitalName }), _jsx(TableCell, { children: row.id2 }), _jsx(TableCell, { children: row.atomicSpecies2 }), _jsx(TableCell, { children: row.orbitalName2 }), _jsx(TableCell, { children: row.distance }), _jsx(TableCell, { children: row.value })] }, key));
+                        }) })] })] })) : null;
+}

dist/components/HubbardVNN.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+interface HubbardVNNProps {
+    property: any;
+}
+export declare function HubbardVNN({ property }: HubbardVNNProps): ReactElement | null;
+export {};

dist/components/HubbardVNN.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import Typography from "@mui/material/Typography";
+export function HubbardVNN({ property }) {
+    let { values = [] } = property;
+    // filter out empty objects from the array e.g., [{}] => []
+    values = values.filter((item) => Object.keys(item).length !== 0);
+    const headers = [
+        "Site no. 1",
+        "Atom 1",
+        "Orbital 1",
+        "Site no. 2",
+        "Atom 2",
+        "Orbital 2",
+        "V (eV)",
+    ];
+    return values.length > 0 ? (_jsxs(Box, { p: 4, sx: { overflow: "scroll" }, children: [_jsx(Typography, { variant: "subtitle2", color: "text.primary", children: "Hubbard V parameters (nearest neighbors)" }), _jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: headers.map((item, idx) => {
+                                const key = `hubbard-v-nn-header-${idx}`;
+                                return _jsx(TableCell, { children: item }, key);
+                            }) }) }), _jsx(TableBody, { children: values.map((row, idx) => {
+                            const key = `hubbard-v-nn-${idx}`;
+                            return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: row.id }), _jsx(TableCell, { children: row.atomicSpecies }), _jsx(TableCell, { children: row.orbitalName }), _jsx(TableCell, { children: row.id2 }), _jsx(TableCell, { children: row.atomicSpecies2 }), _jsx(TableCell, { children: row.orbitalName2 }), _jsx(TableCell, { children: row.value })] }, key));
+                        }) })] })] })) : null;
+}

dist/components/NonScalarsList.d.ts

@@ -0,0 +1,8 @@
+import type { PropertyHolderSchema } from "@mat3ra/esse/dist/js/types";
+import type { PropertiesProveExtraConfig } from "../types";
+interface NonScalarsListProps {
+    results?: PropertyHolderSchema["data"][];
+    extraConfig?: PropertiesProveExtraConfig;
+}
+export declare function NonScalarsList({ results, extraConfig }: NonScalarsListProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

dist/components/NonScalarsList.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PropertyFactory, PropertyName } from "@mat3ra/prode";
+import Grid from "@mui/material/Grid";
+import React from "react";
+import s from "underscore.string";
+import { BandGaps } from "./BandGaps";
+import { DielectricTensor } from "./DielectricTensor";
+import { FileContent } from "./FileContent";
+import { HubbardU } from "./HubbardU";
+import { HubbardV } from "./HubbardV";
+import { HubbardVNN } from "./HubbardVNN";
+import { OneLevelObject } from "./primitive/Object";
+import { Tensor } from "./primitive/Tensor";
+import { Structure } from "./Structure";
+import { TwoDimensionalPlot } from "./TwoDimensionalPlot";
+import { WorkflowLink } from "./WorkflowLink";
+const SMALL = { xs: 12, md: 6, xl: 4 };
+const LARGE = { xs: 12 };
+const TWO_DIMENSIONAL_PLOT = { component: TwoDimensionalPlot, size: LARGE };
+const TENSOR = { component: Tensor, size: SMALL };
+const PROPERTY_VIEWS = {
+    [PropertyName.convergence_electronic]: TWO_DIMENSIONAL_PLOT,
+    [PropertyName.convergence_ionic]: TWO_DIMENSIONAL_PLOT,
+    [PropertyName.phonon_dispersions]: TWO_DIMENSIONAL_PLOT,
+    [PropertyName.phonon_dos]: TWO_DIMENSIONAL_PLOT,
+    [PropertyName.density_of_states]: TWO_DIMENSIONAL_PLOT,
+    [PropertyName.band_structure]: TWO_DIMENSIONAL_PLOT,
+    [PropertyName.reaction_energy_profile]: TWO_DIMENSIONAL_PLOT,
+    [PropertyName.potential_profile]: TWO_DIMENSIONAL_PLOT,
+    [PropertyName.wavefunction_amplitude]: TWO_DIMENSIONAL_PLOT,
+    [PropertyName.charge_density_profile]: TWO_DIMENSIONAL_PLOT,
+    [PropertyName.average_potential_profile]: TWO_DIMENSIONAL_PLOT,
+    [PropertyName.atomic_forces]: TENSOR,
+    [PropertyName.stress_tensor]: TENSOR,
+    [PropertyName.magnetic_moments]: TENSOR,
+    [PropertyName.final_structure]: { component: Structure, size: LARGE },
+    [PropertyName.total_energy_contributions]: { component: OneLevelObject, size: LARGE },
+    [PropertyName.band_gaps]: { component: BandGaps, size: LARGE },
+    [PropertyName.file_content]: { component: FileContent, size: SMALL },
+    [PropertyName.dielectric_tensor]: { component: DielectricTensor, size: LARGE },
+    [PropertyName.hubbard_u]: { component: HubbardU, size: LARGE },
+    [PropertyName.hubbard_v]: { component: HubbardV, size: LARGE },
+    [PropertyName.hubbard_v_nn]: { component: HubbardVNN, size: LARGE },
+    [PropertyName.workflow_pyml_predict]: { component: WorkflowLink, size: SMALL },
+};
+export function NonScalarsList({ results = [], extraConfig }) {
+    const nonScalarResults = React.useMemo(() => {
+        const nonScalarResultsNames = PropertyFactory.getScalarPropertyNames();
+        return results.filter((x) => {
+            return !nonScalarResultsNames.includes(x.name) && Object.keys(x).length > 1;
+        });
+    }, [results]);
+    const widgets = React.useMemo(() => {
+        const widgetElements = [];
+        nonScalarResults.forEach((data, index) => {
+            const property = PropertyFactory.createProperty(data);
+            const componentConfig = PROPERTY_VIEWS[data.name];
+            const propertyId = s.slugify(data.name);
+            if (componentConfig) {
+                const { component: ResultComponent, size } = componentConfig;
+                widgetElements.push(
+                // We add the index to propertyID here to ensure a unique key exists for each property
+                // If we run into a bug in the future where we try to update the results dynamically, but they don't
+                // actually update, see https://stackoverflow.com/q/41703160/
+                _jsx(Grid, { item: true, "data-tid": propertyId, ...size, children: _jsx(ResultComponent, { property: property, data: data, title: s.humanize(data.name), extraConfig: extraConfig }, propertyId) }, propertyId + index.toString()));
+            }
+        });
+        return widgetElements;
+    }, [nonScalarResults, extraConfig]);
+    if (!widgets.length)
+        return null;
+    return (_jsx(Grid, { container: true, wrap: "wrap", children: widgets }));
+}

dist/components/Structure.d.ts

@@ -0,0 +1,6 @@
+import type { PropertiesProveExtraConfig } from "../types";
+interface StructureNewProps {
+    extraConfig: PropertiesProveExtraConfig;
+}
+export declare function Structure({ extraConfig }: StructureNewProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

dist/components/Structure.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+export function Structure({ extraConfig }) {
+    const [index, setIndex] = useState(0);
+    const { MaterialComponent, MaterialComponentProps, materials } = extraConfig;
+    if (!materials.length)
+        return null;
+    return (_jsx(MaterialComponent, { className: "relaxed-structure m-b-10", editable: false, showHeader: true, showActions: true, showHeaderToolbar: true, hideDescription: true, material: materials[index], index: index, length: materials.length, onUpdateIndex: setIndex, ...MaterialComponentProps }));
+}

dist/components/TwoDimensionalPlot.d.ts

@@ -0,0 +1,6 @@
+import type { AveragePotentialProfileProperty, BandStructureProperty, ChargeDensityProfileProperty, DensityOfStatesProperty, PhononDispersionsProperty, PhononDOSProperty, PotentialProfileProperty, ReactionEnergyProfileProperty } from "@mat3ra/prode";
+interface TwoDimensionalPlotProps {
+    property: AveragePotentialProfileProperty | BandStructureProperty | ChargeDensityProfileProperty | DensityOfStatesProperty | PhononDispersionsProperty | PhononDOSProperty | PotentialProfileProperty | ReactionEnergyProfileProperty;
+}
+export declare function TwoDimensionalPlot({ property }: TwoDimensionalPlotProps): import("react/jsx-runtime").JSX.Element;
+export {};

dist/components/TwoDimensionalPlot.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chart } from "./primitive/Chart";
+export function TwoDimensionalPlot({ property }) {
+    const { chartConfig, name } = property;
+    return _jsx(Chart, { config: chartConfig, title: name });
+}