35 | {children}
36 |
37 | {isVisible && createPortal(
38 |
46 | {content}
47 |
48 |
,
49 | document.body
50 | )}
51 |
52 | );
53 | };
54 |
55 | export default Tooltip;
56 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "datacontract-editor",
3 | "version": "0.1.2",
4 | "description": "A visual editor for data contracts using the Open Data Contract Standard (ODCS)",
5 | "repository": {
6 | "type": "git",
7 | "url": "https://github.com/datacontract/datacontract-editor"
8 | },
9 | "type": "module",
10 | "bin": {
11 | "datacontract-editor": "./bin/datacontract-editor.js"
12 | },
13 | "files": [
14 | "dist",
15 | "bin"
16 | ],
17 | "scripts": {
18 | "dev": "vite",
19 | "build": "vite build",
20 | "build:debug": "vite build --mode debug",
21 | "lint": "eslint .",
22 | "preview": "vite preview",
23 | "prepublishOnly": "npm run build",
24 | "start": "npm run build && node bin/datacontract-editor.js",
25 | "start:debug": "npm run build:debug && node bin/datacontract-editor.js"
26 | },
27 | "engines": {
28 | "node": ">=22"
29 | },
30 | "dependencies": {
31 | "@headlessui/react": "^2.2.9",
32 | "@monaco-editor/react": "^4.7.0",
33 | "@xyflow/react": "^12.9.0",
34 | "dagre": "^0.8.5",
35 | "monaco-yaml": "^5.4.0",
36 | "open": "^10.1.0",
37 | "path-browserify": "^1.0.1",
38 | "react": "^19.2.1",
39 | "react-dom": "^19.2.1",
40 | "react-router-dom": "^7.9.5",
41 | "yaml": "^2.8.1",
42 | "zustand": "^5.0.8"
43 | },
44 | "devDependencies": {
45 | "@eslint/js": "^9.39.1",
46 | "@tailwindcss/vite": "^4.1.17",
47 | "@types/react": "^19.2.2",
48 | "@types/react-dom": "^19.2.2",
49 | "@vitejs/plugin-react": "^5.1.0",
50 | "eslint": "^9.39.1",
51 | "eslint-plugin-react-hooks": "^5.2.0",
52 | "eslint-plugin-react-refresh": "^0.4.24",
53 | "globals": "^16.5.0",
54 | "tailwindcss": "^4.1.17",
55 | "vite": "^7.2.2"
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/assets/link-icons/confluent.jsx:
--------------------------------------------------------------------------------
1 | export default () =>
21 |
--------------------------------------------------------------------------------
/src/assets/link-icons/index.js:
--------------------------------------------------------------------------------
1 | export { default as ApiIcon } from './api.jsx';
2 | export { default as BigqueryIcon } from './bigquery.jsx';
3 | export { default as CatalogIcon } from './catalog.jsx';
4 | export { default as ChangelogIcon } from './changelog.jsx';
5 | export { default as CollibraIcon } from './collibra.jsx';
6 | export { default as ConfluentSchemaRegistryIcon } from './confluent-schema-registry.jsx';
7 | export { default as ConfluentIcon } from './confluent.jsx';
8 | export { default as DatabricksIcon } from './databricks.jsx';
9 | export { default as DatawarehouseIcon } from './datawarehouse.jsx';
10 | export { default as DeletedIcon } from './deleted.jsx';
11 | export { default as DocumentationIcon } from './documentation.jsx';
12 | export { default as FileCodeIcon } from './file-code.jsx';
13 | export { default as GithubIcon } from './github.jsx';
14 | export { default as GitlabIcon } from './gitlab.jsx';
15 | export { default as KafkaIcon } from './kafka.jsx';
16 | export { default as LeanixIcon } from './leanix.jsx';
17 | export { default as MssqlIcon } from './mssql.jsx';
18 | export { default as OnetrustIcon } from './onetrust.jsx';
19 | export { default as OpenmetadataIcon } from './openmetadata.jsx';
20 | export { default as PostgresIcon } from './postgres.jsx';
21 | export { default as PowerbiIcon } from './powerbi.jsx';
22 | export { default as PurviewIcon } from './purview.jsx';
23 | export { default as RepositoryIcon } from './repository.jsx';
24 | export { default as S3Icon } from './s3.jsx';
25 | export { default as SampleIcon } from './sample.jsx';
26 | export { default as SapIcon } from './sap.jsx';
27 | export { default as SnowflakeIcon } from './snowflake.jsx';
28 | export { default as StarburstIcon } from './starburst.jsx';
29 | export { default as TeamsIcon } from './teams.jsx';
30 |
--------------------------------------------------------------------------------
/src/components/features/preview/PricingSection.jsx:
--------------------------------------------------------------------------------
1 | import {useEditorStore} from "../../../store.js";
2 | import {useShallow} from "zustand/react/shallow";
3 |
4 | const PricingSection = () => {
5 | const price = useEditorStore(useShallow(state => state.getValue('price')));
6 | if (!price) return null;
7 |
8 | return (
9 |
11 |
15 | Price
12 |This section covers pricing when you bill your customer for using 13 | this data product.
14 |
16 |
41 |
17 |
40 | -
18 | {price.priceAmount && (
19 |
- Price Amount 21 |
- {price.priceAmount} 22 |
- Price Currency 28 |
- {price.priceCurrency} 29 |
- Price Unit 35 |
- {price.priceUnit} 36 |
20 |
23 | )}
24 |
25 | {price.priceCurrency && (
26 |
27 |
30 | )}
31 |
32 | {price.priceUnit && (
33 |
34 |
37 | )}
38 |
18 |
55 | );
56 | };
57 |
58 | export default DataContractPreview;
59 |
--------------------------------------------------------------------------------
/src/assets/link-icons/starburst.jsx:
--------------------------------------------------------------------------------
1 | export default ({ className }) => (
2 |
13 | );
14 |
--------------------------------------------------------------------------------
/src/assets/support-icons/discord.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/components/ui/AuthoritativeDefinitionsPreview.jsx:
--------------------------------------------------------------------------------
1 | import {IconResolver} from './IconResolver.jsx';
2 | import Tooltip from './Tooltip.jsx';
3 | import LinkIcon from './icons/LinkIcon.jsx';
4 |
5 | /**
6 | * AuthoritativeDefinitionsPreview component for displaying authoritative definitions
7 | * A compact, icon-only preview component with tooltips
8 | *
9 | * @param {Array} definitions - Array of authoritative definition objects with {type, url, description}
10 | * @param {string} size - Icon size class (default: 'w-4 h-4')
11 | */
12 | const AuthoritativeDefinitionsPreview = ({definitions = [], size = 'w-4 h-4'}) => {
13 | if (!definitions || definitions.length === 0) {
14 | return null;
15 | }
16 |
17 | return (
18 |
22 | {/* 1. Fundamentals Section */}
23 |
54 |
19 | {definitions.map((def, index) => {
20 | const tooltipContent = (
21 |
35 |
41 |
46 | );
47 | })}
48 |
49 | );
50 | };
51 |
52 | export default AuthoritativeDefinitionsPreview;
53 |
--------------------------------------------------------------------------------
/src/assets/link-icons/catalog.jsx:
--------------------------------------------------------------------------------
1 | export default () =>
2 |
--------------------------------------------------------------------------------
/.github/workflows/azure-static-web-apps-orange-desert-03e149203.yml:
--------------------------------------------------------------------------------
1 | name: Azure Static Web Apps CI/CD
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | pull_request:
8 | types: [opened, synchronize, reopened, closed]
9 | branches:
10 | - main
11 |
12 | jobs:
13 | build_and_deploy_job:
14 | if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
15 | runs-on: ubuntu-latest
16 | name: Build and Deploy Job
17 | steps:
18 | - uses: actions/checkout@v3
19 | with:
20 | submodules: true
21 | lfs: false
22 | - name: Build And Deploy
23 | id: builddeploy
24 | uses: Azure/static-web-apps-deploy@v1
25 | with:
26 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_DESERT_03E149203 }}
27 | repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
28 | action: "upload"
29 | ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
30 | # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
31 | app_location: "/" # App source code path
32 | api_location: "" # Api source code path - optional
33 | output_location: "dist" # Built app content directory - optional
34 | ###### End of Repository/Build Configurations ######
35 |
36 | close_pull_request_job:
37 | if: github.event_name == 'pull_request' && github.event.action == 'closed'
38 | runs-on: ubuntu-latest
39 | name: Close Pull Request Job
40 | steps:
41 | - name: Close Pull Request
42 | id: closepullrequest
43 | uses: Azure/static-web-apps-deploy@v1
44 | with:
45 | azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_DESERT_03E149203 }}
46 | action: "close"
47 |
--------------------------------------------------------------------------------
/src/assets/link-icons/changelog.jsx:
--------------------------------------------------------------------------------
1 | export default () =>
2 |
--------------------------------------------------------------------------------
/src/components/ui/ResizeDivider.jsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useRef } from 'react';
2 |
3 | const ResizeDivider = ({ onResize, minLeftPercent = 20, maxLeftPercent = 80 }) => {
4 | const isDragging = useRef(false);
5 | const containerRef = useRef(null);
6 |
7 | const handleMouseDown = useCallback((e) => {
8 | e.preventDefault();
9 | isDragging.current = true;
10 | document.body.style.cursor = 'col-resize';
11 | document.body.style.userSelect = 'none';
12 | }, []);
13 |
14 | const handleMouseMove = useCallback((e) => {
15 | if (!isDragging.current) return;
16 |
17 | const container = containerRef.current?.parentElement;
18 | if (!container) return;
19 |
20 | const containerRect = container.getBoundingClientRect();
21 | const newLeftPercent = ((e.clientX - containerRect.left) / containerRect.width) * 100;
22 |
23 | // Clamp between min and max
24 | const clampedPercent = Math.min(Math.max(newLeftPercent, minLeftPercent), maxLeftPercent);
25 | onResize(clampedPercent);
26 | }, [onResize, minLeftPercent, maxLeftPercent]);
27 |
28 | const handleMouseUp = useCallback(() => {
29 | isDragging.current = false;
30 | document.body.style.cursor = '';
31 | document.body.style.userSelect = '';
32 | }, []);
33 |
34 | useEffect(() => {
35 | document.addEventListener('mousemove', handleMouseMove);
36 | document.addEventListener('mouseup', handleMouseUp);
37 |
38 | return () => {
39 | document.removeEventListener('mousemove', handleMouseMove);
40 | document.removeEventListener('mouseup', handleMouseUp);
41 | };
42 | }, [handleMouseMove, handleMouseUp]);
43 |
44 | return (
45 |
22 |
31 | );
32 |
33 | return (
34 | {def.type}
23 | {def.description && {def.description}
}
24 | {def.url && (
25 |
26 |
29 | )}
30 |
42 |
44 |
45 |
51 | {/* Invisible wider hit area */}
52 |
53 |
54 | );
55 | };
56 |
57 | export default ResizeDivider;
58 |
--------------------------------------------------------------------------------
/src/assets/link-icons/file-code.jsx:
--------------------------------------------------------------------------------
1 | export default () =>
2 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | import tailwindcss from '@tailwindcss/vite'
4 | import { resolve } from 'path'
5 |
6 | export default defineConfig(({ mode }) => ({
7 | plugins: [
8 | tailwindcss(),
9 | react()
10 | ],
11 | // Use relative base for assets to support context paths
12 | base: './',
13 | define: {
14 | 'global': 'globalThis',
15 | 'process.env.NODE_ENV': JSON.stringify('production'),
16 | },
17 | resolve: {
18 | alias: {
19 | 'path': 'path-browserify'
20 | }
21 | },
22 | worker: {
23 | format: 'es',
24 | // Output workers to assets directory
25 | rollupOptions: {
26 | output: {
27 | entryFileNames: 'assets/[name]-[hash].js'
28 | }
29 | }
30 | },
31 | build: {
32 | outDir: 'dist',
33 | copyPublicDir: true,
34 | // Enable sourcemaps in debug mode
35 | sourcemap: mode === 'debug' ? true : false,
36 | // Disable minification in debug mode for easier debugging
37 | minify: mode === 'debug' ? false : 'esbuild',
38 | lib: {
39 | entry: resolve(__dirname, 'src/embed.jsx'),
40 | name: 'DataContractEditor',
41 | formats: ['es'],
42 | fileName: () => `datacontract-editor.es.js`
43 | },
44 | rollupOptions: {
45 | output: {
46 | exports: 'named',
47 | assetFileNames: (assetInfo) => {
48 | if (assetInfo.name === 'style.css') return 'datacontract-editor.css';
49 | return assetInfo.name;
50 | },
51 | // Ensure workers are placed in assets/
52 | chunkFileNames: (chunkInfo) => {
53 | if (chunkInfo.name.includes('worker')) {
54 | return 'assets/[name]-[hash].js';
55 | }
56 | return '[name]-[hash].js';
57 | }
58 | }
59 | },
60 | // Increase chunk size warnings threshold for Monaco
61 | chunkSizeWarningLimit: 5000,
62 | // Ensure all assets are properly bundled
63 | cssCodeSplit: false,
64 | },
65 | optimizeDeps: {
66 | include: [
67 | 'monaco-editor',
68 | 'monaco-yaml'
69 | ]
70 | }
71 | }))
72 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Data Contract Editor
2 |
3 | A web-based editor for creating and managing data contracts using the [Open Data Contract Standard](https://bitol-io.github.io/open-data-contract-standard/latest/) (ODCS).
4 |
5 | 
6 |
7 | ## Features
8 |
9 | - **Open Data Contract Standard**: ODCS is the industry-standard for data contracts. Now with support for v3.1.0.
10 | - **Editing Modes**:
11 | - **Visual Editor**: Define data models and relationships using a visual interface
12 | - **Form Editor**: Get guided input with a simple form interface
13 | - **YAML Editor**: Edit data contracts directly in YAML format with code completion
14 | - **Preview**: Live preview of data contracts as HTML
15 | - **Validation**: Get instant feedback on your data contracts
16 | - **Test**: Test your data contract directly against your data using the Data Contract CLI API Server.
17 |
18 |
19 | ## Usage
20 |
21 | ### Web Editor
22 |
23 | Open the editor as web application:
24 |
25 | https://editor.datacontract.com
26 |
27 |
28 | ### Standalone Application
29 |
30 | You can start the editor locally using the following command:
31 |
32 | ```
33 | npx datacontract-editor
34 | ```
35 |
36 | Or edit a data contract file directly:
37 |
38 | ```
39 | npx datacontract-editor mydatacontract.odcs.yaml
40 | ```
41 |
42 |
43 |
44 | ### Docker
45 |
46 | Run the editor locally in a Docker container:
47 |
48 | ```
49 | docker run -d -p 4173:4173 datacontract/editor
50 | ```
51 |
52 | Then open http://localhost:4173
53 |
54 |
55 | ### Data Contract CLI
56 |
57 | Coming soon!
58 |
59 | You can start the editor from the Data Contract CLI:
60 |
61 | ```
62 | datacontract editor datacontract.yaml
63 | ```
64 |
65 |
66 |
67 | ### Entropy Data
68 |
69 | The Data Contract Editor is fully integrated in our commercial product [Entropy Data](https://entropy-data.com) to manage multiple data contracts in a single application.
70 |
71 |
72 |
73 | ## License
74 |
75 | This project is maintained by [Entropy Data](https://entropy-data.com) and licensed under the [MIT LICENSE](LICENSE).
76 |
--------------------------------------------------------------------------------
/src/assets/link-icons/confluent-schema-registry.jsx:
--------------------------------------------------------------------------------
1 | export default () =>
18 |
--------------------------------------------------------------------------------
/src/components/features/schema/PropertyIndicators.jsx:
--------------------------------------------------------------------------------
1 | import {Tooltip} from '../../ui/index.js';
2 | import KeyIcon from "../../ui/icons/KeyIcon.jsx";
3 | import AsteriskIcon from "../../ui/icons/AsteriskIcon.jsx";
4 | import LockClosedIcon from "../../ui/icons/LockClosedIcon.jsx";
5 | import CheckCircleIcon from "../../ui/icons/CheckCircleIcon.jsx";
6 | import LinkIcon from "../../ui/icons/LinkIcon.jsx";
7 |
8 | /**
9 | * Visual indicator badges component showing property metadata
10 | * Displays icons for primary key, required, classification, quality rules, and relationships
11 | */
12 | const PropertyIndicators = ({property}) => {
13 | const indicators = [];
14 |
15 | if (property.primaryKey) {
16 | indicators.push(
17 |
57 | {indicators}
58 |
59 | );
60 | };
61 |
62 | export default PropertyIndicators;
63 |
--------------------------------------------------------------------------------
/src/routes/CustomProperties.jsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 | import { useEditorStore } from '../store.js';
3 | import CustomPropertiesEditor from '../components/ui/CustomPropertiesEditor.jsx';
4 | import { stringifyYaml, parseYaml } from '../utils/yaml.js';
5 |
6 | const CustomProperties = () => {
7 | const yaml = useEditorStore((state) => state.yaml);
8 | const setYaml = useEditorStore((state) => state.setYaml);
9 |
10 | // Parse current YAML to extract form values
11 | const formData = useMemo(() => {
12 | if (!yaml?.trim()) {
13 | return { customProperties: [] };
14 | }
15 |
16 | try {
17 | const parsed = parseYaml(yaml);
18 | return {
19 | customProperties: parsed.customProperties || []
20 | };
21 | } catch {
22 | return { customProperties: [] };
23 | }
24 | }, [yaml]);
25 |
26 | // Update YAML when custom properties change
27 | const handleChange = (value) => {
28 | try {
29 | let parsed = {};
30 | if (yaml?.trim()) {
31 | try {
32 | parsed = parseYaml(yaml) || {};
33 | } catch {
34 | parsed = {};
35 | }
36 | }
37 |
38 | if (value && value.length > 0) {
39 | parsed.customProperties = value;
40 | } else {
41 | delete parsed.customProperties;
42 | }
43 |
44 | const newYaml = stringifyYaml(parsed);
45 | setYaml(newYaml);
46 | } catch (error) {
47 | console.error('Error updating YAML:', error);
48 | }
49 | };
50 |
51 | return (
52 |
53 |
70 | );
71 | };
72 |
73 | export default CustomProperties;
74 |
--------------------------------------------------------------------------------
/src/components/ui/CustomPropertiesPreview.jsx:
--------------------------------------------------------------------------------
1 | import Tooltip from './Tooltip.jsx';
2 |
3 | /**
4 | * CustomPropertiesPreview component for displaying custom properties as pills
5 | * A compact preview component showing property-value pairs
6 | *
7 | * @param {Array|Object} properties - Array of {property, value, description} objects OR an object with key-value pairs
8 | * @param {string} pillClassName - Additional CSS classes to apply to individual pills (e.g., "mr-1 mt-1")
9 | */
10 | const CustomPropertiesPreview = ({properties = [], pillClassName = ""}) => {
11 | if (!properties) {
12 | return null;
13 | }
14 |
15 | // Normalize properties to array format
16 | // Handle both array format [{property, value, description}] and object format {key: value}
17 | let normalizedProperties = [];
18 | if (Array.isArray(properties)) {
19 | normalizedProperties = properties;
20 | } else if (typeof properties === 'object') {
21 | normalizedProperties = Object.entries(properties).map(([key, value]) => ({
22 | property: key,
23 | value: value,
24 | }));
25 | }
26 |
27 | if (normalizedProperties.length === 0) {
28 | return null;
29 | }
30 |
31 | // Helper to format value for display
32 | const formatValue = (value) => {
33 | if (value === null || value === undefined) return '';
34 | if (typeof value === 'object') {
35 | try {
36 | return JSON.stringify(value);
37 | } catch {
38 | return String(value);
39 | }
40 | }
41 | return String(value);
42 | };
43 |
44 | const roundedClass = "rounded-md";
45 | const paddingClass = "px-2 py-1";
46 |
47 | return (
48 | <>
49 | {normalizedProperties.map((prop, index) => {
50 | const pill = (
51 |
54 | {prop.property}:{formatValue(prop.value)}
55 |
56 | );
57 |
58 | if (prop.description) {
59 | return (
60 |
54 |
69 |
55 |
68 |
56 |
67 | Custom Properties
57 |58 | A list of key/value pairs for custom properties. Names should be in camel case. 59 |
60 | 61 |
27 |
32 | Custom 28 | Properties
29 |This section covers other properties you may find in a data 30 | contract.
31 |
33 |
53 |
34 |
52 | -
35 | {normalizedProperties.map((property, index) => (
36 |
-
38 | {property.property}
39 | {property.description && (
40 |
41 | 43 | )} 44 |42 |
45 | -
46 |
47 |
48 |
37 |
49 | ))}
50 |
32 |
33 |
34 | {/* Display existing items */}
35 | {value.length > 0 && (
36 |
73 | );
74 | };
75 |
76 | export default ArrayInput;
77 |
--------------------------------------------------------------------------------
/src/assets/support-icons/googlechat.svg:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/public/logo_fuchsia_v2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
14 |
--------------------------------------------------------------------------------
/src/components/ui/ValidatedInput.jsx:
--------------------------------------------------------------------------------
1 | import { forwardRef } from 'react';
2 | import Tooltip from './Tooltip.jsx';
3 | import QuestionMarkCircleIcon from "./icons/QuestionMarkCircleIcon.jsx";
4 |
5 | /**
6 | * A self-validating input component that shows errors when required field is empty
7 | * Follows Tailwind UI patterns for form validation
8 | * Supports ref forwarding for auto-focus functionality
9 | */
10 | const ValidatedInput = forwardRef(({
11 | name,
12 | label,
13 | value,
14 | onChange,
15 | required = false,
16 | tooltip,
17 | placeholder,
18 | className = '',
19 | externalErrors = [],
20 | ...props
21 | }, ref) => {
22 |
23 | // Internal validation - check if required field is empty
24 | const hasInternalError = required && (!value || value.toString().trim() === '');
25 |
26 | // Combine internal and external errors
27 | const hasError = hasInternalError || externalErrors.length > 0;
28 |
29 | // Prepare error messages
30 | const errorMessages = [];
31 | if (hasInternalError) {
32 | errorMessages.push('This field is required');
33 | }
34 | errorMessages.push(...externalErrors);
35 |
36 | // Determine ring color based on error state
37 | const ringClass = hasError
38 | ? 'ring-red-300 focus:ring-red-500'
39 | : 'ring-gray-300 focus:ring-indigo-600';
40 |
41 | return (
42 |
37 | {value.map((item, index) => (
38 |
50 | )}
51 |
52 | {/* Add new item */}
53 |
39 | {item}
40 |
47 |
48 | ))}
49 |
54 | setNewItem(e.target.value)}
58 | onKeyPress={handleKeyPress}
59 | className="flex-1 rounded border border-gray-300 bg-white px-2 py-1 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-xs"
60 | placeholder={placeholder}
61 | />
62 |
69 |
70 |
71 | {helpText && {helpText}
} 72 |
43 |
75 | );
76 | });
77 |
78 | ValidatedInput.displayName = 'ValidatedInput';
79 |
80 | export default ValidatedInput;
81 |
--------------------------------------------------------------------------------
/src/assets/server-icons/athena.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/components/ui/PropertyValueRenderer.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * PropertyValueRenderer - Recursively renders complex property values
3 | * Handles primitives, arrays, objects, and nested structures
4 | */
5 | export default function PropertyValueRenderer({ value, depth = 0 }) {
6 | // Handle null or undefined
7 | if (value === null || value === undefined) {
8 | return null;
9 | }
10 |
11 | // Handle primitives
12 | if (typeof value === 'string') {
13 | return {value};
14 | }
15 |
16 | if (typeof value === 'number') {
17 | return {value};
18 | }
19 |
20 | if (typeof value === 'boolean') {
21 | return {value.toString()};
22 | }
23 |
24 | // Handle arrays
25 | if (Array.isArray(value)) {
26 | if (value.length === 0) {
27 | return [];
28 | }
29 |
30 | // Check if array contains only primitives for compact display
31 | const allPrimitives = value.every(item =>
32 | typeof item === 'string' || typeof item === 'number' || typeof item === 'boolean'
33 | );
34 |
35 | if (allPrimitives && value.length <= 3) {
36 | return (
37 |
38 | [{value.map((item, idx) => (
39 |
40 |
44 |
47 | {tooltip && (
48 |
49 |
51 | )}
52 | {required && (
53 | Required
54 | )}
55 |
56 |
69 | {hasError && errorMessages.map((message, idx) => (
70 | 71 | {message} 72 |
73 | ))} 74 |
51 | {value.map((item, index) => (
52 |
60 | );
61 | }
62 |
63 | // Handle objects
64 | if (typeof value === 'object') {
65 | const entries = Object.entries(value);
66 |
67 | if (entries.length === 0) {
68 | return {'{}'};
69 | }
70 |
71 | return (
72 |
53 | •
54 |
58 | ))}
59 |
55 |
57 | 0 ? 'pl-4 border-l-2 border-gray-200' : ''}`}>
73 | {entries.map(([key, val]) => (
74 |
84 | );
85 | }
86 |
87 | // Fallback for unknown types
88 | return {String(value)};
89 | }
90 |
--------------------------------------------------------------------------------
/src/assets/link-icons/gitlab.jsx:
--------------------------------------------------------------------------------
1 | export default () =>
4 |
--------------------------------------------------------------------------------
/src/assets/support-icons/teams.svg:
--------------------------------------------------------------------------------
1 |
47 |
--------------------------------------------------------------------------------
/src/assets/link-icons/teams.jsx:
--------------------------------------------------------------------------------
1 | export default () =>
47 |
--------------------------------------------------------------------------------
/src/components/ui/icons/AuthoritativeDefinitionsIcon.jsx:
--------------------------------------------------------------------------------
1 | const AuthoritativeDefinitionsIcon = ({ className = "w-4 h-4" }) => (
2 |
30 | );
31 |
32 | export default AuthoritativeDefinitionsIcon;
33 |
--------------------------------------------------------------------------------
/src/utils/schemaPathBuilder.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Utilities for building schema property paths used with zustand store
3 | * Paths follow the format: schema[0].properties[1].items.properties[2].fieldName
4 | */
5 |
6 | /**
7 | * Build a path string to a property
8 | * @param {number} schemaIdx - Schema index
9 | * @param {Array} propPath - Array of path segments (numbers for indices, 'items' for items nodes)
10 | * @param {string} field - Optional field name to append
11 | * @returns {string} Path string like "schema[0].properties[1].items.logicalType"
12 | */
13 | export function buildPropertyPath(schemaIdx, propPath, field = null) {
14 | let pathStr = `schema[${schemaIdx}].properties`;
15 |
16 | for (let i = 0; i < propPath.length; i++) {
17 | if (propPath[i] === 'items') {
18 | pathStr += '.items';
19 | // If there are more segments after 'items', continue to properties
20 | if (i < propPath.length - 1) {
21 | pathStr += '.properties';
22 | }
23 | } else {
24 | pathStr += `[${propPath[i]}]`;
25 | // If next segment is not 'items', navigate to properties
26 | if (i < propPath.length - 1 && propPath[i + 1] !== 'items') {
27 | pathStr += '.properties';
28 | }
29 | }
30 | }
31 |
32 | if (field) {
33 | pathStr += `.${field}`;
34 | }
35 |
36 | return pathStr;
37 | }
38 |
39 | /**
40 | * Build a path string to an items object
41 | * @param {number} schemaIdx - Schema index
42 | * @param {Array} propPath - Array of path segments
43 | * @param {string} field - Optional field name to append
44 | * @returns {string} Path string to items object
45 | */
46 | export function buildItemsPath(schemaIdx, propPath, field = null) {
47 | let pathStr = buildPropertyPath(schemaIdx, propPath);
48 | pathStr += '.items';
49 |
50 | if (field) {
51 | pathStr += `.${field}`;
52 | }
53 |
54 | return pathStr;
55 | }
56 |
57 | /**
58 | * Build a path string to a properties array
59 | * @param {number} schemaIdx - Schema index
60 | * @param {Array} propPath - Array of path segments
61 | * @param {boolean} isItems - Whether this is for items.properties
62 | * @returns {string} Path string to properties array
63 | */
64 | export function buildPropertiesArrayPath(schemaIdx, propPath, isItems = false) {
65 | let pathStr = buildPropertyPath(schemaIdx, propPath);
66 |
67 | if (isItems) {
68 | pathStr += '.items.properties';
69 | } else {
70 | pathStr += '.properties';
71 | }
72 |
73 | return pathStr;
74 | }
75 |
76 | /**
77 | * Extract parent path and index from a bracket-notation path
78 | * @param {string} path - Path like "schema[0].properties[2]"
79 | * @returns {{parentPath: string, index: number}|null} Parent path and index, or null if invalid
80 | */
81 | export function extractParentPathAndIndex(path) {
82 | const lastBracketIndex = path.lastIndexOf('[');
83 | if (lastBracketIndex === -1) {
84 | return null;
85 | }
86 |
87 | const parentPath = path.substring(0, lastBracketIndex);
88 | const indexStr = path.substring(lastBracketIndex + 1, path.length - 1);
89 | const index = parseInt(indexStr, 10);
90 |
91 | if (isNaN(index)) {
92 | return null;
93 | }
94 |
95 | return { parentPath, index };
96 | }
97 |
--------------------------------------------------------------------------------
/src/components/features/preview/RolesSection.jsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import CustomPropertiesPreview from '../../ui/CustomPropertiesPreview.jsx';
3 | import {useEditorStore} from "../../../store.js";
4 | import {useShallow} from "zustand/react/shallow";
5 |
6 | // Memoized Role Item component
7 | const RoleItem = memo(({ role }) => {
8 | return (
9 |
75 |
82 | ))}
83 |
76 | {key}:
77 |
78 |
79 |
81 |
11 | {role.role && (
12 |
52 |
13 |
18 | )}
19 | {role.access && (
20 |
14 | Role
15 | {role.role}
16 |
17 |
21 |
26 | )}
27 | {role.firstLevelApprovers && (
28 |
22 | Access
23 | {role.access}
24 |
25 |
29 |
34 | )}
35 | {role.secondLevelApprovers && (
36 |
30 | First Level Approvers
31 | {role.firstLevelApprovers}
32 |
33 |
37 |
42 | )}
43 |
38 | Second Level Approvers
39 | {role.secondLevelApprovers}
40 |
41 |
44 |
51 |
45 | Custom Properties
46 |
47 |
48 |
49 |
50 |
72 |
77 | Roles
73 |Support and communication channels help consumers find help 74 | regarding 75 | their use of the data contract
76 |-
79 | {roles.map((role, index) => (
80 |
50 |
86 |
51 |
54 | setApiServerUrl(e.target.value)}
59 | placeholder="https://api.datacontract.com"
60 | className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
61 | />
62 |
69 | 63 | Current: {apiServerUrl || 'https://api.datacontract.com'} 64 |
65 |66 | The base URL for the Data Contract CLI API server. Leave empty to use the default. 67 |
68 |
70 |
73 | setApiKey(e.target.value)}
78 | placeholder="Enter your API key"
79 | className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
80 | />
81 |
85 | 82 | Optional API key for authentication with the Data Contract CLI API server. 83 |
84 |
10 |
62 | );
63 |
64 | return (
65 |
11 |
61 |
12 |
60 |
13 |
16 |
17 |
18 |
59 | 19 | Preview Error 20 |
21 |22 | The preview could not be rendered. This usually happens when the YAML contains unexpected data structures. 23 |
24 | 25 |
26 | Error:
27 | {error?.message || 'Unknown error'}
28 |
29 |
30 |
31 |
38 |
39 | Suggestions:
32 |-
33 |
- Check your YAML syntax for errors 34 |
- Verify data contract structure matches the ODCS schema 35 |
- Try editing the YAML directly to fix the issue 36 |
40 |
46 |
47 |
48 | {process.env.NODE_ENV === 'development' && (
49 |
50 |
57 | )}
58 | 51 | Developer Details 52 |
53 |
54 | {error?.stack}
55 |
56 |
41 | {label && (
42 |
102 | );
103 | };
104 |
105 | export default Tags;
106 |
--------------------------------------------------------------------------------
/src/components/diagram/layoutUtils.js:
--------------------------------------------------------------------------------
1 | import dagre from 'dagre';
2 |
3 | /**
4 | * Layout nodes using the Dagre graph layout algorithm
5 | * @param {Array} schemas - Array of schema objects to layout
6 | * @returns {Array} - Schemas with calculated positions
7 | */
8 | export const getLayoutedElements = (schemas) => {
9 | const dagreGraph = new dagre.graphlib.Graph();
10 | dagreGraph.setDefaultEdgeLabel(() => ({}));
11 | // Configure graph for better edge handling
12 | dagreGraph.setGraph({
13 | rankdir: 'LR', // Left to right to match our left-to-right edges
14 | nodesep: 80, // Horizontal spacing between nodes
15 | ranksep: 150, // Vertical spacing between ranks
16 | edgesep: 50, // Spacing between edges
17 | marginx: 50,
18 | marginy: 50
19 | });
20 |
21 | // Add nodes to the graph
22 | schemas.forEach((schema, index) => {
23 | // Estimate height based on number of properties
24 | const propertyCount = schema.properties?.length || 0;
25 | const nodeHeight = Math.max(150, 80 + propertyCount * 40);
26 | dagreGraph.setNode(`schema-${index}`, { width: 250, height: nodeHeight });
27 | });
28 |
29 | // Add edges to the graph based on property relationships
30 | schemas.forEach((schema, sourceIndex) => {
31 | if (!schema.properties) return;
32 |
33 | schema.properties.forEach((prop) => {
34 | // Check ODCS relationships first
35 | const relationships = prop?.relationships || [];
36 |
37 | relationships.forEach(relationship => {
38 | const reference = relationship.to;
39 | if (reference && typeof reference === 'string') {
40 | const [targetSchemaName] = reference.split('.');
41 |
42 | // Find the target schema index
43 | const targetIndex = schemas.findIndex(s => s?.name === targetSchemaName);
44 |
45 | if (targetIndex !== -1) {
46 | // Add edge to Dagre graph (reversed direction: target -> source)
47 | // The referenced schema should point to the schema with the reference
48 | dagreGraph.setEdge(`schema-${targetIndex}`, `schema-${sourceIndex}`);
49 | }
50 | }
51 | });
52 |
53 | // Backward compatibility: also check customProperties.references
54 | if (prop?.customProperties?.references) {
55 | const [targetSchemaName] = prop.customProperties.references.split('.');
56 |
57 | // Find the target schema index
58 | const targetIndex = schemas.findIndex(s => s?.name === targetSchemaName);
59 |
60 | if (targetIndex !== -1) {
61 | // Add edge to Dagre graph (reversed direction: target -> source)
62 | // The referenced schema should point to the schema with the reference
63 | dagreGraph.setEdge(`schema-${targetIndex}`, `schema-${sourceIndex}`);
64 | }
65 | }
66 | });
67 | });
68 |
69 | // Run the layout algorithm
70 | dagre.layout(dagreGraph);
71 |
72 | // Apply calculated positions to schemas
73 | return schemas.map((schema, index) => {
74 | const nodeWithPosition = dagreGraph.node(`schema-${index}`);
75 | return {
76 | ...schema,
77 | position: {
78 | x: nodeWithPosition.x - 125, // Center the node
79 | y: nodeWithPosition.y - (nodeWithPosition.height / 2),
80 | },
81 | };
82 | });
83 | };
84 |
85 | /**
86 | * Calculate grid-based position for a schema node
87 | * @param {number} index - Index of the schema in the array
88 | * @returns {Object} - Position object with x and y coordinates
89 | */
90 | export const getGridPosition = (index) => {
91 | const cols = 3;
92 | const nodeWidth = 300;
93 | const nodeHeight = 400;
94 | const startX = 50;
95 | const startY = 50;
96 |
97 | return {
98 | x: startX + (index % cols) * nodeWidth,
99 | y: startY + Math.floor(index / cols) * nodeHeight
100 | };
101 | };
102 |
--------------------------------------------------------------------------------
/src/assets/link-icons/kafka.jsx:
--------------------------------------------------------------------------------
1 | export default () =>
21 |
--------------------------------------------------------------------------------
/src/assets/server-icons/serverIcons.jsx:
--------------------------------------------------------------------------------
1 | // Server icons - imports SVG files for all server types with fallback to database.svg
2 |
3 | // Import SVG files as URLs
4 | import ApiIcon from './api.svg';
5 | import AthenaIcon from './athena.svg';
6 | import AzureIcon from './azure.svg';
7 | import BigQueryIcon from './bigquery.svg';
8 | import ClickHouseIcon from './clickhouse.svg';
9 | import CloudSQLIcon from './cloudsql.svg';
10 | import CustomIcon from './custom.svg';
11 | import DatabaseIcon from './database.svg';
12 | import DatabricksIcon from './databricks.svg';
13 | import DB2Icon from './db2.svg';
14 | import DenodoIcon from './denodo.svg';
15 | import DremioIcon from './dremio.svg';
16 | import DuckDBIcon from './duckdb.svg';
17 | import GlueIcon from './glue.svg';
18 | import HiveIcon from './hive.svg';
19 | import InformixIcon from './informix.svg';
20 | import KafkaIcon from './kafka.svg';
21 | import KinesisIcon from './kinesis.svg';
22 | import LocalIcon from './local.svg';
23 | import MySQLIcon from './mysql.svg';
24 | import OracleIcon from './oracle.svg';
25 | import PostgreSQLIcon from './postgresql.svg';
26 | import PostgresIcon from './postgres.svg';
27 | import PrestoIcon from './presto.svg';
28 | import PubSubIcon from './pubsub.svg';
29 | import RedshiftIcon from './redshift.svg';
30 | import S3Icon from './s3.svg';
31 | import SFTPIcon from './sftp.svg';
32 | import SnowflakeIcon from './snowflake.svg';
33 | import SQLServerIcon from './sqlserver.svg';
34 | import SynapseIcon from './synapse.svg';
35 | import TrinoIcon from './trino.svg';
36 | import VerticaIcon from './vertica.svg';
37 |
38 | // Wrapper component to render SVG as img tag with consistent styling
39 | const IconWrapper = ({ src }) =>
43 |
46 | {tooltip && (
47 |
48 |
50 | )}
51 |
52 | )}
53 |
54 |
55 | {/* Display existing tags */}
56 | {value && value.length > 0 && (
57 |
101 |
58 | {value.map((tag, index) => (
59 |
63 |
66 | {tag}
67 |
77 |
78 | ))}
79 |
80 | )}
81 |
82 | {/* Add new tag input */}
83 |
84 | setNewTag(e.target.value)}
88 | onKeyPress={handleKeyPress}
89 | className="flex-1 rounded-md bg-white border-0 py-1.5 pl-2 pr-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-xs leading-4"
90 | placeholder={placeholder}
91 | />
92 |
99 |
100 |
14 |
73 | );
74 |
75 | return (
76 |
15 |
72 |
16 |
71 |
17 |
20 |
21 |
22 |
70 | 23 | Form Error 24 |
25 |26 | The {pageName} form encountered an error and could not be displayed. 27 |
28 | 29 |
30 | Error:
31 | {error?.message || 'Unknown form error'}
32 |
33 |
34 |
35 |
43 |
44 | What you can do:
36 |-
37 |
- Switch to YAML view to edit your data contract directly 38 |
- Check if your YAML structure is valid 39 |
- Try navigating to a different form page 40 |
- Your data is safe - the YAML has been preserved 41 |
45 |
51 |
57 |
58 |
59 | {process.env.NODE_ENV === 'development' && (
60 |
61 |
68 | )}
69 | 62 | Developer Details 63 |
64 |
65 | {error?.stack}
66 |
67 |
10 | {sla.property && (
11 |
75 |
12 |
17 | )}
18 | {sla.value !== undefined && sla.value !== null && (
19 |
13 | Property
14 | {sla.property}
15 |
16 |
20 |
25 | )}
26 | {sla.unit && (
27 |
21 | Value
22 | {sla.value}
23 |
24 |
28 |
33 | )}
34 | {sla.element && (
35 |
29 | Unit
30 | {sla.unit}
31 |
32 |
36 |
41 | )}
42 | {sla.driver && (
43 |
37 | Element(s)
38 | {sla.element}
39 |
40 |
44 |
49 | )}
50 | {sla.scheduler && (
51 |
45 | Driver
46 | {sla.driver}
47 |
48 |
52 |
57 | )}
58 | {sla.schedule && (
59 |
53 | Scheduler
54 | {sla.scheduler}
55 |
56 |
60 |
65 | )}
66 | {sla.description && (
67 |
61 | Schedule
62 | {sla.schedule}
63 |
64 |
68 |
73 | )}
74 |
69 | Description
70 | {sla.description}
71 |
72 |
95 |
99 | Service-Level Agreement 96 | (SLA)
97 |This section describes the service-level agreements (SLA).
98 |-
101 | {slaProperties.map((sla, index) => (
102 |
31 | {label && (
32 |
33 | {label}
34 |
35 | )}
36 |
37 |
38 | {IconComponent && (
39 |
40 |
49 |
50 | e.stopPropagation()}
55 | >
56 | {fallbackLogicalTypeOptions.map((type) => {
57 | const TypeIcon = getLogicalTypeIcon(type);
58 | return (
59 |
64 |
65 | {TypeIcon && (
66 |
67 |
78 | );
79 | })}
80 |
81 |
82 |