feat: improve experimental layout

src/components/chemistry/pubchem/Vp.tsx

@@ -0,0 +1,38 @@
+export default function Vp(props: {
+  data: {
+    temperature: {
+      low: number;
+      high: number;
+      units: string;
+    };
+    pressure: {
+      low: number;
+      high: number;
+      units: string;
+    };
+  };
+}) {
+  if (!props.data?.pressure?.low) return <></>;
+  const { temperature, pressure } = props.data;
+
+  let pressureLow =
+    String(pressure.low).length > 10
+      ? pressure.low.toPrecision(4)
+      : pressure.low;
+
+  let pressureHigh =
+    String(pressure.high).length > 10
+      ? pressure.high.toPrecision(4)
+      : pressure.high;
+
+  return (
+    <span>
+      {pressureLow}
+      {pressureHigh && `-${pressureHigh}`}
+      {pressure.units && ` ${pressure.units}`}
+      {temperature &&
+        temperature.low &&
+        ` (${temperature.low} ${temperature.units})`}
+    </span>
+  );
+}

src/components/chemistry/pubchem/experimental/BpTable.tsx

@@ -0,0 +1,45 @@
+import { SvgOutlineExternalLink } from '@/components/tailwind-ui';
+
+import Bp from '../Bp';
+import { CompactTable, Td, Th } from '../CompactTable';
+
+export default function BpTable(props: { data: any }) {
+  const { data } = props;
+  if (!data) return <></>;
+  return (
+    <div>
+      <div className="text-xl pt-5">Boiling point</div>
+      <CompactTable Header={Header} data={data} Tr={Row} />
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <tr>
+      <Th>Original value</Th>
+      <Th>Parsed</Th>
+      <Th>Reference</Th>
+    </tr>
+  );
+}
+
+function Row(props: any) {
+  const value = props.value;
+  return (
+    <tr key={value.label}>
+      <Td>{value.data.original}</Td>
+      <Td>
+        <Bp data={value?.data?.parsed} />
+      </Td>
+      <Td>
+        <div>
+          {value.reference.sourceName}{' '}
+          <a href={value.reference.url} rel="noreferrer" target="_blank">
+            <SvgOutlineExternalLink style={{ display: 'inline' }} />
+          </a>
+        </div>
+      </Td>
+    </tr>
+  );
+}

src/components/chemistry/pubchem/experimental/Experimental.tsx

@@ -1,30 +1,18 @@
-import Bp from '../Bp';
-import LowHighUnits from '../LowHighUnits';
-
-import OnePropertyTable from './OnePropertyTable';
+import BpTable from './BpTable';
+import FlashPointTable from './FlashPointTable';
+import MpTable from './MpTable';
+import SolubilityTable from './SolubilityTable';
+import VaporPressureTable from './VaporPressureTable';
 
 export default function Experimental(props: { experimental: any }) {
   const { experimental } = props;
-
-  const components = [];
-  for (let key in experimental) {
-    let parsedRenderer: any = LowHighUnits;
-    switch (key) {
-      case 'boilingPoint':
-        parsedRenderer = Bp;
-        break;
-      default:
-    }
-    components.push(
-      <div>
-        <div>{key}</div>
-        <OnePropertyTable
-          parsedRenderer={parsedRenderer}
-          data={experimental[key]}
-        />
-      </div>,
-    );
-  }
-
-  return <div>{components}</div>;
+  return (
+    <div>
+      <BpTable data={experimental.boilingPoint} />
+      <MpTable data={experimental.meltingPoint} />
+      <FlashPointTable data={experimental.flashPoint} />
+      <VaporPressureTable data={experimental.vaporPressure} />
+      <SolubilityTable data={experimental.solubility} />
+    </div>
+  );
 }

src/components/chemistry/pubchem/experimental/FlashPointTable.tsx

@@ -0,0 +1,45 @@
+import { SvgOutlineExternalLink } from '@/components/tailwind-ui';
+
+import { CompactTable, Td, Th } from '../CompactTable';
+import LowHighUnits from '../LowHighUnits';
+
+export default function FlashPointTable(props: { data: any }) {
+  const { data } = props;
+  if (!data) return <></>;
+  return (
+    <div>
+      <div className="text-xl pt-5">Flash point</div>
+      <CompactTable Header={Header} data={data} Tr={Row} />
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <tr>
+      <Th>Original value</Th>
+      <Th>Parsed</Th>
+      <Th>Reference</Th>
+    </tr>
+  );
+}
+
+function Row(props: any) {
+  const value = props.value;
+  return (
+    <tr key={value.label}>
+      <Td>{value.data.original}</Td>
+      <Td>
+        <LowHighUnits data={value?.data?.parsed} />
+      </Td>
+      <Td>
+        <div>
+          {value.reference.sourceName}{' '}
+          <a href={value.reference.url} rel="noreferrer" target="_blank">
+            <SvgOutlineExternalLink style={{ display: 'inline' }} />
+          </a>
+        </div>
+      </Td>
+    </tr>
+  );
+}

src/components/chemistry/pubchem/experimental/MpTable.tsx

@@ -0,0 +1,45 @@
+import { SvgOutlineExternalLink } from '@/components/tailwind-ui';
+
+import { CompactTable, Td, Th } from '../CompactTable';
+import LowHighUnits from '../LowHighUnits';
+
+export default function MpTable(props: { data: any }) {
+  const { data } = props;
+  if (!data) return <></>;
+  return (
+    <div>
+      <div className="text-xl pt-5">Melting point</div>
+      <CompactTable Header={Header} data={data} Tr={Row} />
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <tr>
+      <Th>Original value</Th>
+      <Th>Parsed</Th>
+      <Th>Reference</Th>
+    </tr>
+  );
+}
+
+function Row(props: any) {
+  const value = props.value;
+  return (
+    <tr key={value.label}>
+      <Td>{value.data.original}</Td>
+      <Td>
+        <LowHighUnits data={value?.data?.parsed} />
+      </Td>
+      <Td>
+        <div>
+          {value.reference.sourceName}{' '}
+          <a href={value.reference.url} rel="noreferrer" target="_blank">
+            <SvgOutlineExternalLink style={{ display: 'inline' }} />
+          </a>
+        </div>
+      </Td>
+    </tr>
+  );
+}

src/components/chemistry/pubchem/experimental/SolubilityTable.tsx

@@ -0,0 +1,40 @@
+import { SvgOutlineExternalLink } from '@/components/tailwind-ui';
+
+import { CompactTable, Td, Th } from '../CompactTable';
+
+export default function SolubilityTable(props: { data: any }) {
+  const { data } = props;
+  if (!data) return <></>;
+  return (
+    <div>
+      <div className="text-xl pt-5">Solubility</div>
+      <CompactTable Header={Header} data={data} Tr={Row} />
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <tr>
+      <Th>Original value</Th>
+      <Th>Reference</Th>
+    </tr>
+  );
+}
+
+function Row(props: any) {
+  const value = props.value;
+  return (
+    <tr key={value.label}>
+      <Td>{value.data.original}</Td>
+      <Td>
+        <div>
+          {value.reference.sourceName}{' '}
+          <a href={value.reference.url} rel="noreferrer" target="_blank">
+            <SvgOutlineExternalLink style={{ display: 'inline' }} />
+          </a>
+        </div>
+      </Td>
+    </tr>
+  );
+}

src/components/chemistry/pubchem/experimental/VaporPressureTable.tsx

@@ -0,0 +1,45 @@
+import { SvgOutlineExternalLink } from '@/components/tailwind-ui';
+
+import { CompactTable, Td, Th } from '../CompactTable';
+import Vp from '../Vp';
+
+export default function VaporPressureTable(props: { data: any }) {
+  const { data } = props;
+  if (!data) return <></>;
+  return (
+    <div>
+      <div className="text-xl pt-5">Vapor pressure</div>
+      <CompactTable Header={Header} data={data} Tr={Row} />
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <tr>
+      <Th>Original value</Th>
+      <Th>Parsed</Th>
+      <Th>Reference</Th>
+    </tr>
+  );
+}
+
+function Row(props: any) {
+  const value = props.value;
+  return (
+    <tr key={value.label}>
+      <Td>{value.data.original}</Td>
+      <Td>
+        <Vp data={value?.data?.parsed} />
+      </Td>
+      <Td>
+        <div>
+          {value.reference.sourceName}{' '}
+          <a href={value.reference.url} rel="noreferrer" target="_blank">
+            <SvgOutlineExternalLink style={{ display: 'inline' }} />
+          </a>
+        </div>
+      </Td>
+    </tr>
+  );
+}