{
+ const { data, genericType, fnUpload, showProps } = props;
+ const { show, setShow } = showProps;
+
+ const handleReaderLoaded = e => {
+ const verify = handleKlassUploading(e, genericType);
+ fnUpload(verify);
+ setShow(false);
+ };
+
+ const handleUploadTemplate = file => {
+ const reader = new FileReader();
+ reader.onload = handleReaderLoaded;
+ reader.readAsText(file[0]);
+ };
+
+ return (
+
setShow(false)}>
+
+ {`Import ${genericType} and its template`}
+
+
+ handleUploadTemplate(attach)}
+ style={{ height: 50, width: '100%', border: '3px dashed lightgray' }}
+ >
+
+ Drop File, or Click to Select.
+
+
+
+
+ );
+};
+
+UploadKlassModal.propTypes = {
+ data: PropTypes.object.isRequired,
+ genericType: PropTypes.oneOf([
+ Constants.GENERIC_TYPES.ELEMENT,
+ Constants.GENERIC_TYPES.SEGMENT,
+ Constants.GENERIC_TYPES.DATASET,
+ ]).isRequired,
+ fnUpload: PropTypes.func.isRequired,
+ showProps: PropTypes.shape({
+ show: PropTypes.bool.isRequired,
+ setShow: PropTypes.func.isRequired,
+ }).isRequired,
+};
+
+export default UploadKlassModal;
diff --git a/src/components/elements/UploadTemplateModal.js b/src/components/elements/UploadTemplateModal.js
index 743c08f..cd4464c 100644
--- a/src/components/elements/UploadTemplateModal.js
+++ b/src/components/elements/UploadTemplateModal.js
@@ -30,7 +30,7 @@ const UploadTemplateModal = props => {
return (
setShow(false)}>
- {`Upload ${genericType} Templates`}
+ Upload template to Work Area
{
+ const { tip } = props;
+ const tt = typeof tip === 'string' ? [tip] : tip;
+ const tooltip = (
+
+ {tt.join('\r\n')}
+
+ );
+ const { size, bs, fnClick, element, place, icon, disabled, txt, btnCls } =
+ props;
+ const content = txt ? {txt} : '';
+ if (bs === '') {
+ return (
+
+
+
+ );
+ }
+ return (
+
+
+
+ );
+};
+
+ButtonTooltipFA.propTypes = {
+ tip: PropTypes.oneOfType([PropTypes.array, PropTypes.string]).isRequired,
+ element: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+ fnClick: PropTypes.func.isRequired,
+ bs: PropTypes.string,
+ size: PropTypes.string,
+ place: PropTypes.string,
+ icon: PropTypes.element,
+ disabled: PropTypes.bool,
+ txt: PropTypes.string,
+ btnCls: PropTypes.string,
+};
+
+ButtonTooltipFA.defaultProps = {
+ bs: '',
+ size: 'xs',
+ place: 'top',
+ icon: ,
+ disabled: false,
+ txt: null,
+ element: {},
+ btnCls: '',
+};
+
+export default ButtonTooltipFA;
diff --git a/src/components/fields/DateTimeRange.js b/src/components/fields/DateTimeRange.js
index 9bf9d5d..721a89a 100644
--- a/src/components/fields/DateTimeRange.js
+++ b/src/components/fields/DateTimeRange.js
@@ -16,7 +16,6 @@ import { round } from 'lodash';
import moment from 'moment';
import 'moment-precise-range-plugin';
import { genUnit, genUnits, unitConversion } from 'generic-ui-core';
-import { genUnitSup } from '../tools/utils';
import GenericSubField from '../models/GenericSubField';
const DateTimeRangeFields = [
@@ -32,6 +31,13 @@ const MomentUnit = {
s: 'seconds',
};
+const DurationLabel = {
+ d: 'day(s)',
+ h: 'hour(s)',
+ min: 'min(s)',
+ s: 'sec(s)',
+};
+
const DateTimeRange = props => {
const { layer, opt, onInputChange } = props;
const timePlaceholder = 'DD/MM/YYYY hh:mm:ss';
@@ -241,8 +247,9 @@ const DateTimeRange = props => {
dataChange({ field: 'duration', event: 'changeUnit' })
}
>
- {genUnitSup(genUnit('duration', duration.value_system).label) ||
- ''}
+ {DurationLabel[
+ genUnit('duration', duration.value_system).key
+ ] || ''}
diff --git a/src/components/fields/FieldBadge.js b/src/components/fields/FieldBadge.js
new file mode 100644
index 0000000..f6bc7a0
--- /dev/null
+++ b/src/components/fields/FieldBadge.js
@@ -0,0 +1,25 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Badge } from 'react-bootstrap';
+
+const FieldBadge = props => {
+ const { fieldObj, prop } = props;
+ let badgeText = fieldObj[prop] || '';
+
+ if (prop === 'type' && fieldObj[prop] === 'select') {
+ badgeText = `${badgeText}: ${fieldObj?.option_layers}`;
+ }
+ if (prop === 'cols' && !!badgeText) {
+ badgeText = `column width division: ${badgeText}`;
+ }
+
+ return {badgeText};
+};
+
+FieldBadge.propTypes = {
+ prop: PropTypes.string.isRequired,
+ fieldObj: PropTypes.object.isRequired,
+};
+
+export default FieldBadge;
diff --git a/src/components/fields/FieldTooltip.js b/src/components/fields/FieldTooltip.js
new file mode 100644
index 0000000..9ceea21
--- /dev/null
+++ b/src/components/fields/FieldTooltip.js
@@ -0,0 +1,24 @@
+/* eslint-disable react/forbid-prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
+
+const FieldTooltip = ({ link }) => {
+ if (!link) return null;
+ return (
+
+ );
+};
+
+FieldTooltip.propTypes = { link: PropTypes.string.isRequired };
+
+export default FieldTooltip;
diff --git a/src/components/fields/GenPropertiesFields.js b/src/components/fields/GenPropertiesFields.js
index bf8573b..dd4fea6 100644
--- a/src/components/fields/GenPropertiesFields.js
+++ b/src/components/fields/GenPropertiesFields.js
@@ -198,7 +198,7 @@ const GenPropertiesDrop = opt => {
: 'drop_generic_properties';
let createOpt = null;
- if (opt.value.is_new === true && opt.classStr === 'GenericEl') {
+ if (opt.value.is_new === true && opt.classStr) {
createOpt = (
{
{
+ // Find the index of the current unit in the units array
+ const currentIndex = units.findIndex(unit => unit.key === currentUnit);
+
+ // If the unit is not found, throw an error
+ if (currentIndex === -1) return null;
+
+ // Get the next index, wrapping around to 0 if we're at the end of the array
+ const nextIndex = (currentIndex + 1) % units.length;
+
+ // Return the object of the next unit
+ return units[nextIndex];
+};
+
+const convertUnits = (fromUnit, toUnit, value, units) => {
+ // Find the 'from' and 'to' units in the units array
+ const from = units.find(unit => unit.key === fromUnit);
+ const to = units.find(unit => unit.key === toUnit);
+
+ // If either unit is not found, throw an error
+ if (!from || !to) return null;
+
+ // Convert the value from the 'from' unit to the 'to' unit
+ const result = value * (from.nm / to.nm);
+ return parseFloat(result.toFixed(5));
+};
+
+const PopUnits = (si = []) => {
+ const tbl = si.units.map(e => (
+
+ {genUnitSup(e.label)}
+
+
+ ));
+ return (
+
+
+ available units
+
+
+ {tbl}
+
+ );
+};
+
+const InputUnit = props => {
+ const { fObj, fnUnitChange } = props;
+ const { option_layers: si, value_system: valueSystem } = fObj;
+ const sis = getUnitSystem();
+ const fSi = sis.filter(e => e.field === si)[0];
+ if (!fSi || Object.keys(fSi).length === 0) return null; // return if SI is not found
+
+ const defaultUnit = fSi?.units[0];
+ const unit = genUnit(fSi.field, valueSystem || defaultUnit?.key);
+ if (!unit || Object.keys(unit).length === 0) return null; // return if unit is not found
+
+ const onClick = () => {
+ const nextUnit = getNextUnit(unit.key, fSi.units);
+ fnUnitChange({ data: nextUnit.key });
+ };
+
+ return (
+
+
+ {getFieldProps('supportedUnits').label}{' '}
+ {getFieldProps('supportedUnits').fieldTooltip}
+
+
+
+
+
+ );
+};
+
+InputUnit.propTypes = {
+ fObj: PropTypes.object.isRequired,
+ fnUnitChange: PropTypes.func.isRequired,
+};
+
+export default InputUnit;
diff --git a/src/components/flow/DnDFlow.js b/src/components/flow/DnDFlow.js
index 7027ef5..f0257d7 100644
--- a/src/components/flow/DnDFlow.js
+++ b/src/components/flow/DnDFlow.js
@@ -47,6 +47,7 @@ const DnDFlow = props => {
animated: true,
markerEnd: { type: MarkerType.ArrowClosed },
label: 'next',
+ labelStyle: { fill: 'red', fontWeight: 700 },
},
eds
)
diff --git a/src/components/flow/FlowImageButton.js b/src/components/flow/FlowImageButton.js
new file mode 100644
index 0000000..15e6e87
--- /dev/null
+++ b/src/components/flow/FlowImageButton.js
@@ -0,0 +1,55 @@
+// refer to the example from https://reactflow.dev/examples/misc/download-image
+
+import React from 'react';
+import { Button } from 'react-bootstrap';
+import {
+ Panel,
+ useReactFlow,
+ getRectOfNodes,
+ getTransformForBounds,
+} from 'reactflow';
+import { toPng } from 'html-to-image';
+
+function downloadImage(dataUrl) {
+ const link = document.createElement('a');
+ link.setAttribute('download', 'workflow.png');
+ link.setAttribute('href', dataUrl);
+ link.setAttribute('crossorigin', 'anonymous');
+ link.click();
+}
+
+const imageWidth = 1024;
+const imageHeight = 768;
+
+function FlowImageButton() {
+ const { getNodes } = useReactFlow();
+ const onClick = () => {
+ const nodesBounds = getRectOfNodes(getNodes());
+ const transform = getTransformForBounds(
+ nodesBounds,
+ imageWidth,
+ imageHeight,
+ 0.5,
+ 2
+ );
+ toPng(document.querySelector('.react-flow__viewport'), {
+ width: imageWidth,
+ height: imageHeight,
+ style: {
+ width: imageWidth,
+ height: imageHeight,
+ transform: `translate(${transform[0]}px, ${transform[1]}px) scale(${transform[2]})`,
+ },
+ })
+ .then(downloadImage)
+ .catch(error => console.log('oops, something went wrong!', error));
+ };
+
+ return (
+
+
+
+ );
+}
+
+export default FlowImageButton;
diff --git a/src/components/flow/FlowView.js b/src/components/flow/FlowView.js
index f5ac5ec..ba82e95 100644
--- a/src/components/flow/FlowView.js
+++ b/src/components/flow/FlowView.js
@@ -11,6 +11,7 @@ import ReactFlow, {
// import ExampleFlow from './ExampleFlow';
import LayerNode from './LayerNode';
import { buildFlowElements } from '../../utils/flow/build-flow-elements';
+import FlowImageButton from './FlowImageButton';
const nodeTypes = {
selectorNode: LayerNode,
@@ -44,6 +45,7 @@ const FlowView = props => {
onInit={setReactFlowInstance}
>
+
@@ -51,8 +53,5 @@ const FlowView = props => {
);
};
-FlowView.propTypes = {
- properties: PropTypes.object.isRequired,
-};
-
+FlowView.propTypes = { properties: PropTypes.object.isRequired };
export default FlowView;
diff --git a/src/components/flow/FlowViewerModal.js b/src/components/flow/FlowViewerModal.js
index 258bfb1..9c1935e 100644
--- a/src/components/flow/FlowViewerModal.js
+++ b/src/components/flow/FlowViewerModal.js
@@ -14,6 +14,7 @@ const FlowViewerModal = props => {
properties_release: propertiesRelease,
properties,
shortLabel,
+ flowType,
} = data;
if (Object.keys(propertiesRelease || {}).length < 1) return null;
@@ -58,6 +59,7 @@ const FlowViewerModal = props => {