Skip to content

Latest commit

 

History

History
207 lines (156 loc) · 8.2 KB

README.md

File metadata and controls

207 lines (156 loc) · 8.2 KB

InteractiveAI logo

​ InteractiveAI Front

​ Node Vue Vite TypeScript Leaflet D3 Axios

InteractiveAI platform provides support in augmented decision-making for complex steering systems.
The platform make use of the project OperatorFabric for notification management and authentication.

Table of Contents
  1. Environment variables
  2. Adding your custom entity
  3. Project Setup
  4. Contributing
  5. Recommended IDE Setup
  6. Type Support for `.vue` Imports in TS
  7. Customize configuration
  8. Packages used

Environment variables

If you're using a different API location than the root location of the frontend, you can use env variables to set it:

  • VITE_API for the default API
  • VITE_ENTITY_SIMU for entity-specific API (VITE_POWERGRID_SIMU in the example).

In this case, you may need to disable CORS protection if the APIs are not configured properly.

chromium-browser --disable-web-security --user-data-dir="[some directory here]"

Adding your custom entity

Adding your own entity (eg ENTITY) is done simply by adding your folder in src/entities/ENTITY. Make sure its name matches exactly the entity created in OperatorFabric.

Structure

src/entities/ENTITY
├── assets
│   ├── img                 # Custom assets
│   │   └── example.webp
│   ├── logo.svg            # Your logo in svg
│   └── theme.scss          # CSS variables to overwrite default theme
├── CAB                     # Define your own panels
│   ├── components          # Custom components
│   │   └── Example.vue
│   ├── Assistant.vue       # Your assistant
│   ├── Context.vue         # Your context
│   ├── Notifications.vue   # Your notifications
│   └── Timeline.vue        # Your timeline
├── locales                 # Custom locales
│   ├── en.json
│   └── fr.json
├── api.ts                  # Your custom api (optional)
└── types.ts                # Your custom types

Config file

In src/entities/config.ts, add your new entity :

// Import your theme here
import './ENTITY/assets/theme.scss'

// Import your types here
// cf. Type Support for your custom entity
import type { ENTITY } from './ENTITY/types'

// Add your entity and config here
// hydrated: automatically fetch metadata for cards
// darkMode: use dark mode
export const ENTITIES_CONFIG = {
  ENTITY: { hydrated: true, darkMode: true }
}

// Bind your types here
type EntitiesTypes = {
  ENTITY: ENTITY
} as const

Type Support for your custom entity

In src/entities/ENTITY/types.ts, you can define your custom types as follow:

export type ENTITY = {
  Context: any // Context returned by context service
  Metadata: any // Custom metadata added on cards
  Action: any // Actions returned by recommendation service
}

It is also the right place to define your other custom types.
You can then import and add your types to src/config.ts (cf. Adding your custom entity)

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev
npm run dev: {mode} # run dev environment where {mode} is
                    # demo, development, prod, production, simu

Type-Check, Compile and Minify for Production

npm run build
npm run build: {mode} # build specific environment where {mode} is
                      # demo, development, prod, production, simu

Run Unit Tests with Vitest

npm run test:unit

Run End-to-End Tests with Cypress

npm run test:e2e:dev

This runs the end-to-end tests against the Vite development server. It is much faster than the production build.

But it's still recommended to test the production build with test:e2e before deploying (e.g. in CI environments):

npm run build
npm run test:e2e

Lint with ESLint

npm run lint

Contributing

Commits use conventional commit specification. You can easily compose your commit message using npm run commit.
Husky automatically checks your commit message, format and lint your files, and checks the typing.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support for .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

  1. Disable the built-in TypeScript Extension
    1. Run Extensions: Show Built-in Extensions from VSCode's command palette
    2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
  2. Reload the VSCode window by running Developer: Reload Window from the command palette.

Customize configuration

See Vite Configuration Reference.

Packages used