@tilde-nlp/cat-tool
Advanced tools
Tilde's CAT tool front-end, requires modified Matecat backend to connect to.
VueJs single page application that connects to modified matecat api.
Run 'npm install' to install required npm packages
Run 'npm run build.wc' to build web component in dist folder
Use built package to integrate in other projects
For local development and testing of the cat-tool package, follow these steps to set up live updates:
Execute the command npm run build:watch to initiate the watch mode for building. This will automatically rebuild the package when changes are detected.
Navigate to the dist directory and execute npm link. This command creates a symbolic link for the cat-tool package that can be used in other projects.
In any project where you wish to use the locally developed cat-tool, run the command npm link @tilde-nlp/cat-tool. This links the local version of cat-tool to your project.
After setting up the link, any modifications made to cat-tool and subsequently recompiled will reflect in the project where it's linked.
npm run build.wc
npm run svg.generate
Since project is built as web component, the main entry for webpack is App.vue file. It takes parameters from html element, creates app configuration, registers global components and initializes app. This app uses Vuex for state management. When App.vue has set up all configurations, it will call states init method and try to get authorized profile. If authorization fails, app will redirect to configured login url.
Vue router uses 3 main pages:
Dashboard.vue - contains user file list and button for navigating to file upload
FileUpload.vue - contains file uploader screen
Translator.vue - contains the actual CAT tool
Components folder contains both general components and specific components for file list and translator
Checkbox.vue - is used in stead of regular html checkboxes to style them using svg files in one place and then reuse
Dropdown.vue - same reason as checkbox, style them once and reuse
HugoSelect.vue - is used for specific dropdown in translator for file download and pre-translate options
SettingsPanel.vue - is used to encapsulate settings in translator component
WelcomeScreen.vue - component for first time users to show welcome message in case of empty file list
FileListContainer.vue - houses currently selected file list with controls for each specific file
FileListPager.vue - contains controls for switching currently selected files in a list
FileListSelector.vue - contains upload form for new files aka file uploader
Contains all components that build up the actual CAT tool
TranslatorAssistant.vue - Contains all the controls on the right side of screen, including domain selector, suggestions, term lookup, shortcuts and comments
TranslatorEditor.vue - contains single text block editor field (either source block or target block), that handles input, tag visualization, in-text navigation
TranslatorSegment.vue - contains each separate segments, including source and target editor, segment edit type flag and number
TranslatorToolbox.vue - contains user controls above segment list
Axios folder contains functions to call matcat back-end api.
Contains file that defines all available routes in application. No guards are used because every request is authorized in back-end.
Vuex state manager See Vuex Reference.
Contains helper methods for cookie manipulations, data converters, html <=> xliff converters and dom manipulations
css - all css is written in less and is separated into files based on domain, then everything is included in entry file cat.less to be built with webpack
svg files - raw svg icons are stored in root/svg folder and using npm run svg.generate can be turned into inline styles for more flexible manipulations, build inline svg files are stored in root/src/assets/svg folder
Localization files are stored in root/lang folder, in separate folders for each language, further split into multiple files by domain. App.vue file contains setUiLang() method that is used to set language from external application, like TildeMT angular website.
When integrating with cat-tool, it exposes numerous configuration values
On app load eventListener 'cat-go-to-start' is added. App is navigated to main view (dashboard) on event.
On Dashborad view open 'cat-dashboard-open' event is dispatched.
On Translator view open 'cat-file-open' event is dispatched, event.detail contains opened file name.
On HTTP request error 'cat-http-error' event is dispatched if response contains status code. event.detail contains HTTP response status code.
FAQs
Tilde's CAT tool front-end, requires modified Matecat backend to connect to.
We found that @tilde-nlp/cat-tool demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.
