Add a dialog with the chrono chart image for geologic table

specifyweb/frontend/js_src/lib/components/Attachments/ChronoChart.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {
+  TransformComponent,
+  TransformWrapper,
+  useControls,
+} from 'react-zoom-pan-pinch';
+
+import { useBooleanState } from '../../hooks/useBooleanState';
+import { commonText } from '../../localization/common';
+import { headerText } from '../../localization/header';
+import { Button } from '../Atoms/Button';
+import { Dialog, dialogClassNames } from '../Molecules/Dialog';
+
+export function ChronoChart(): JSX.Element {
+  const [showChronoChart, handleShowChronoChart, handleHideChronoChart] =
+    useBooleanState();
+
+  return (
+    <>
+      <Button.Icon
+        icon="clock"
+        title="Chronostratigraphic Chart"
+        onClick={handleShowChronoChart}
+      />
+      {showChronoChart && (
+        <Dialog
+          buttons={
+            <Button.DialogClose>{commonText.close()}</Button.DialogClose>
+          }
+          className={{
+            container: dialogClassNames.wideContainer,
+          }}
+          header={headerText.chronostratigraphicChart()}
+          onClose={handleHideChronoChart}
+        >
+          <TransformWrapper>
+            <div className="flex items-center justify-between">
+              <TransformComponent>
+                <img
+                  alt="Chrono Chart"
+                  className="h-[70vh]"
+                  src="/static/img/chronostratChart2023-09.jpg"
+                  width="100%"
+                />
+              </TransformComponent>
+              <Controls />
+            </div>
+          </TransformWrapper>
+        </Dialog>
+      )}
+    </>
+  );
+}
+
+function Controls(): JSX.Element {
+  const { zoomIn, zoomOut } = useControls();
+  return (
+    <div className="flex flex-col">
+      <Button.Icon
+        icon="plus"
+        title={commonText.zoom()}
+        onClick={() => zoomIn()}
+      />
+      <Button.Icon
+        icon="minus"
+        title={commonText.unzoom()}
+        onClick={() => zoomOut()}
+      />
+    </div>
+  );
+}

specifyweb/frontend/js_src/lib/components/FormSliders/RecordSelectorFromIds.tsx

@@ -9,6 +9,7 @@ import type { RA } from '../../utils/types';
 import { removeItem } from '../../utils/utils';
 import { Button } from '../Atoms/Button';
 import { DataEntry } from '../Atoms/DataEntry';
+import { ChronoChart } from '../Attachments/ChronoChart';
 import { RecordSetAttachments } from '../Attachments/RecordSetAttachment';
 import { tablesWithAttachments } from '../Attachments/utils';
 import { ReadOnlyContext } from '../Core/Contexts';
@@ -234,6 +235,9 @@ export function RecordSelectorFromIds<SCHEMA extends AnySchema>({
               !resource?.isNew() ? (
                 <RecordSetAttachments records={records} onFetch={handleFetch} />
               ) : undefined}
+              {table.view === 'GeologicTimePeriod' ? (
+                <ChronoChart />
+              ) : undefined}
               {specifyNetworkBadge}
             </div>
             {totalCount > 1 && <div>{slider}</div>}

specifyweb/frontend/js_src/lib/components/TreeView/index.tsx

@@ -16,6 +16,7 @@ import { caseInsensitiveHash } from '../../utils/utils';
 import { Container, H2 } from '../Atoms';
 import { Button } from '../Atoms/Button';
 import { Input, Label, Select } from '../Atoms/Form';
+import { ChronoChart } from '../Attachments/ChronoChart';
 import type {
   AnyTree,
   FilterTablesByEndsWith,
@@ -310,7 +311,7 @@ function TreeView<TREE_NAME extends AnyTree['tableName']>({
           treeDefinitionItems={treeDefinitionItems}
           onFocusPath={currentStates.focusPath[1]}
         />
-
+        {tableName === 'GeologicTimePeriod' ? <ChronoChart /> : undefined}
         <Button.Icon
           aria-pressed={isSplit}
           disabled={!canSplit}

specifyweb/frontend/js_src/lib/localization/common.ts

@@ -734,4 +734,10 @@ export const commonText = createDictionary({
     'ru-ru': 'Выберите файлы или перетащите их сюда',
     'uk-ua': 'Виберіть файли або перетягніть їх сюди',
   },
+  zoom: {
+    'en-us': 'Zoom',
+  },
+  unzoom: {
+    'en-us': 'Unzoom',
+  },
 } as const);

specifyweb/frontend/js_src/lib/localization/header.ts

@@ -453,4 +453,7 @@ export const headerText = createDictionary({
     'uk-ua': 'Технічні документи',
     'de-ch': 'Technische Dokumentation',
   },
+  chronostratigraphicChart: {
+    'en-us': 'Chronostratigraphic Chart',
+  },
 } as const);

specifyweb/frontend/js_src/package.json

@@ -60,6 +60,7 @@
     "react-draggable": "^4.4.5",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.7.0",
+    "react-zoom-pan-pinch": "^3.6.1",
     "typesafe-i18n": "^5.17.1",
     "typesafe-reducer": "^1.0.3",
     "underscore": "~1.8.3",