Adding initial schema designer component.

[aasimkhan30]

[Copilot]

Copilot reviewed 24 out of 32 changed files in this pull request and generated 1 comment.

Files not reviewed (8)

• .vscode/settings.json: Language not supported
• index.html: Language not supported
• package.json: Language not supported
• src/ts/schemaDesigner/schemaDesigner.css: Language not supported
• ts-examples/bigSchema.html: Language not supported
• ts-examples/resources/schemaDesigner.css: Language not supported
• ts-examples/smallSchema.html: Language not supported
• src/ts/index.ts: Evaluated as low risk

Comments suppressed due to low confidence (3)

src/ts/schemaDesigner/utils.ts:20

• The use of the magic number '5' is unclear. Consider replacing it with a named constant or adding a comment explaining its purpose.

let y = state.y + (column.offsetTop - div.scrollTop + column.offsetHeight / 2) * s; // 5 is the magic number to make the line completely centered to the row.

src/ts/schemaDesigner/schemaDesignerEntity.ts:46

• The code assumes that dataTypeIcons always contains the key column.type. This could lead to an undefined value if the key is not present. Add a check to ensure the key exists.

columnIcon.style.backgroundImage = `url(${this._config.icons.dataTypeIcons![column.type]})`;

src/ts/schemaDesigner/schemaDesignerInterfaces.ts:78

• The enum values for OnAction are strings representing numbers, which can be confusing. Consider using descriptive strings instead, such as 'CASCADE = "CASCADE"'.

CASCADE = "0"

[Copilot]

Copilot reviewed 24 out of 32 changed files in this pull request and generated 1 comment.

Files not reviewed (8)

• .vscode/settings.json: Language not supported
• index.html: Language not supported
• package.json: Language not supported
• src/ts/schemaDesigner/schemaDesigner.css: Language not supported
• ts-examples/bigSchema.html: Language not supported
• ts-examples/resources/schemaDesigner.css: Language not supported
• ts-examples/smallSchema.html: Language not supported
• src/ts/index.ts: Evaluated as low risk

Comments suppressed due to low confidence (2)

src/ts/schemaDesigner/schemaDesignerToolbar.ts:31

• The toolbarBackgroundColor might be undefined. Consider adding a default value or a null check.

dragImage.style.backgroundColor = this._config.color.toolbarBackgroundColor;

src/ts/schemaDesigner/schemaDesignerInterfaces.ts:78

• [nitpick] Enum values should be more descriptive. Consider using descriptive strings like "CASCADE" instead of "0".

CASCADE = "0"

[kburtram]

you may consider creating variable for z-index values to be more expressive what you're trying to do with the different values?

for example,

root {
  /* Z-index hierarchy system */
  --z-base: 1;
  --z-graph: var(--z-base);
  --z-outline: calc(var(--z-base) + 4);
  --z-toolbar: calc(var(--z-base) + 7);
}

/* Then update the components to use these variables */
.sd-toolbar-belt {
  position: fixed;
  bottom: 22px;
  z-index: var(--z-toolbar);
  /* rest of styles... */
}

.sd-outline {
  position: fixed;
  right: 10px;
  top: 10px;
  z-index: var(--z-outline);
  /* rest of styles... */
}

#graphContainer {
  width: 100%;
  height: 100%;
  z-index: var(--z-graph);
  /* rest of styles... */
}

[kburtram]

CI build is failing with node version error.

Run yarn
yarn install v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=20.0.0". Got "18.20.5"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
Error: Process completed with exit code 1.