### Start Taranta Development Server Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/index.md Execute this command to start the development server and run Taranta. ```bash npm start ``` -------------------------------- ### Install Dependencies with npm Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/README.md Run this command after cloning the repository to install project dependencies. ```bash npm install ``` -------------------------------- ### Start Vite Development Server Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/README.md Use this command to start the Vite development server for local development. ```bash npm run dev ``` -------------------------------- ### Test File Structure Example Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/howto_contribute.md Follow this structure for test files, placing them in the same directory as the file they test, with '.test' before the extension. ```bash components/ └── NavBar/ ├── NavBar.tsx └── NavBar.test.tsx ``` -------------------------------- ### Example: Style Component by Device Model Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/svg_custom_css.md This example demonstrates changing the fill color of an SVG component when its associated device model matches the specified string. Use `!important` to override existing styles. ```css svg text[data-model*="sys/tg_test/1/double_scalar"] { fill: green !important; } ``` -------------------------------- ### Example: Device State Colors Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/svg_custom_css.md These examples show how to dynamically change the fill color of SVG components based on different device states like 'ON', 'OFF', 'ALARM', or values containing 'HIGH'. ```css svg .state[data-value="ON"] { fill: green; } svg .state[data-value="OFF"] { fill: red; } svg .state[data-value="ALARM"] { fill: yellow; } svg .[data-value*="HIGH"] { fill: green; } ``` -------------------------------- ### Example JSON Data Structure Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/display.md This is an example of a JSON structure that can be displayed and filtered. ```JSON { "routes": [ { "src":{ "channel":96 }, "dst":{ "port":3 } }, { "src":{ "channel":235 }, "dst":{ "port":16 } } ] } ``` -------------------------------- ### Example: Custom Classes and Device Attributes Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/svg_custom_css.md This example demonstrates styling an SVG component with a custom class ('MyCustomCSSClass') by changing its stroke color and width. This assumes the class was assigned in an SVG editor. ```css svg .MyCustomCSSClass { stroke: blue; stroke-width: 2px; } ``` -------------------------------- ### Install Inkscape (Debian/Ubuntu) Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/svg_inkscape.md Install Inkscape on Debian-based Linux systems using the APT package manager. Ensure your package repositories are updated first. ```bash sudo apt install inkscape # For Debian-based systems ``` -------------------------------- ### Example: Style Components by Value Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/svg_custom_css.md This example changes the fill color of all SVG components that have a `data-value` attribute containing 'ON'. ```css svg [data-value="ON"] { fill: green; } ``` -------------------------------- ### Widget Definition Example Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/Widgets.md Defines a widget's type, name, dimensions, and configurable inputs like device, position, and commands. ```javascript const definition = { type: "MOTOR_CONTROL", name: "Motor Control", defaultWidth: 10, defaultHeight: 20, inputs: { device: { type: "device", publish: "$device", }, position: { type: "attribute", device: "$device", attribute: "Position" }, turnRight: { type: "command", device: "$device", command: "TurnRight" }, turnLeft: { type: "command", device: "$device", command: "TurnLeft" } } } ``` -------------------------------- ### Run Taranta with One Command Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/install_howto.md Use this command for a quick local development setup of Taranta. Ensure all requirements like Make, Git, Docker, and docker-compose are met. ```bash make run ``` -------------------------------- ### Using Index Format for Arrays Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/svg_format.md Illustrates the 'index' format to extract a specific element from an array. Array indices start from 0. This is useful for displaying individual values from a list. ```text format=index(6) ``` -------------------------------- ### Class-Based Component with TypeScript Props Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/Widgets.md Example of a class-based React component correctly typed with the generated Props alias. ```typescript class TheComponent extends React.Component { public constructor(props: Props) { // ... } } ``` -------------------------------- ### Apply Custom CSS to Widget Elements Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/command_file.md Custom CSS rules can be applied to the widget for styling. This example shows how to set text color and background color. ```css color: green; background-color: red; ``` -------------------------------- ### Build Documentation with Make Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/README.md Command to build the project's documentation. ```bash make build-docs ``` -------------------------------- ### Create Widget Folders and Files Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/writing_a_widget.md Commands to create the necessary directory and files for a new widget. ```bash cd src/dashboard/widgets mkdir TarantaWidget ``` ```bash touch TarantaWidget/TarantaWidget.tsx ``` ```bash touch TarantaWidget/TarantaWidgetValues.tsx ``` ```bash touch TarantaWidget/TarantaWidget.test.tsx touch TarantaWidget/TarantaWidgetValues.test.tsx ``` -------------------------------- ### Sample SVG Structure with Rules and Formatting Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/sampleSVG.md A basic SVG structure demonstrating the integration of rules and formatting for various device attributes like routing table, long scalar, and dish state. ```html model=test/tarantatestdevice/1/routingtableRouting Table model=sys/tg_test/1/long_scalar format=concat(Long Scalar: ) Long Scalar model=testdb://test/tarantatestdevice/1/dishstate format=concat(Dish State: ) Dish State { return getAttributeLastValueFromState( state.messages, deviceName, attributeName ); }); ``` -------------------------------- ### Running Tests with npm Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/howto_contribute.md Use 'npm test' to run all tests serially. For faster execution with worker pools, use 'npm run test-fast' or 'npm run test-fast:coverage', but be cautious as some tests may fail. ```bash npm test ``` ```bash npm run test-fast ``` ```bash npm run test-fast:coverage ``` -------------------------------- ### Attribute Invalidation Example Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/Widgets.md Defines inputs for a device, an attribute, and a command. The 'invalidates' field on the command input ensures that the 'power' attribute is refreshed when the 'TurnOff' command is executed. ```json { ... inputs: { device: { type: "device", publish: "$device" }, power: { type: "attribute", device: "$device", attribute: "Power" }, turnOff: { type: "command", device: "$device", command: "TurnOff", invalidates: ["power"] } } } ``` -------------------------------- ### Configure Multiple Layer and CSS Rules Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/svg_rules.md Sets up multiple rules to manage the visibility of different layers and apply conditional CSS styling. Layer visibility is controlled by specific value comparisons, while CSS rules change element appearance based on conditions. ```text rule1: { type=layer model=sys/tg_test/1/short_scalar layer=layer2 condition=value==21 } rule2: { type=layer model=sys/tg_test/1/double_scalar layer=layer3 condition=value>21 and value<90 } rule3: { type=css model=sys/tg_test/1/short_scalar ifcss={"stroke":"orange", "fill":"green"} elsecss={"stroke":"purple"} condition=value>31 } ``` -------------------------------- ### Filtering JSON with XPath Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/display.md Use XPath expressions in the 'Format' field to filter specific parts of a JSON object. This example shows how to access a nested value and a whole object. ```text routes[0].src.channel ``` ```text routes[0] ``` -------------------------------- ### Search for String in Code with Make Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/README.md Use this command to search for a specific string within the project's codebase. ```bash make search-string STR='hello world' ``` -------------------------------- ### Initial Redux Store State Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/redux_state.md This snippet shows the initial structure of the Redux store when a user first lands on a route like 'testdb/devices'. It includes a list of device names and database information. ```javascript deviceList: { nameList: [ 'dserver/databaseds/2', 'dserver/starter/45ba3714711d', 'dserver/tangoaccesscontrol/1', 'dserver/tangotest/test', 'dserver/tarantatestdevice/test', 'dserver/tarantatestdevice/test2', 'sys/access_control/1', 'sys/database/2', 'sys/tg_test/1', 'tango/admin/45ba3714711d', 'test/tarantatestdevice/1', 'test/tarantatestdevice/2' ] }, database: { info: 'TANGO Database sys/database/2\n \nRunning since 2023-05-04 07:59:44\n \nDevices defined = 12\nDevices exported = 10\nDevice servers defined = 6\nDevice servers exported = 5\n \nDevice properties defined = 217 [History lgth = 217]\nClass properties defined = 84 [History lgth = 180]\nDevice attribute properties defined = 0 [History lgth = 0]\nClass attribute properties defined = 0 [History lgth = 0]\nObject properties defined = 0 [History lgth = 0]\n', tangoDBName: 'testdb' } ``` -------------------------------- ### Using Numeral Format for Number Formatting Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/svg_format.md Demonstrates the 'numeral' format for applying specific formatting rules to numbers, such as controlling decimal places. The format rule '0,0.00' is used here for thousands separators and two decimal places. ```text format=numeral(0,0.00) ``` -------------------------------- ### Combining Numeral and Concat Formats (Correct Order) Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/svg_format.md Illustrates the correct order for applying 'numeral' and 'concat' formats to ensure proper data transformation. The 'numeral' format is applied first, followed by 'concat', allowing the numeral format to process the numeric value before the string concatenation. ```text model=sys/tg_test/1/double_scalar format=numeral(0.00) format=concat(Value:) ``` -------------------------------- ### Exporting a Widget Bundle Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/docs/src/writing_a_widget.md This is the standard way to export a widget, combining its definition and React component. ```javascript const definition = ...; class TheComponent extends React.Component ... export default { definition, component: TheComponent }; ``` -------------------------------- ### Basic Widget Export Structure Source: https://gitlab.com/tango-controls/web/taranta/-/blob/develop/Widgets.md A typical widget is exported as a bundle containing its definition and React component. ```javascript const definition = ...; class TheComponent extends React.Component ... export default { definition, component: TheComponent }; ```