SOF-7354: show labels with atomic symbols when present

.github/workflows/cicd.yml

@@ -14,19 +14,19 @@ jobs:
 
     steps:
       - name: Checkout this repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           lfs: true
 
       - name: Checkout actions repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           repository: Exabyte-io/actions
           token: ${{ secrets.BOT_GITHUB_TOKEN }}
           path: actions
 
       - name: Login to GitHub Container registry
-        uses: docker/login-action@v1
+        uses: docker/login-action@v3
         env:
           GITHUB_USER: ${{ github.actor }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -60,12 +60,12 @@ jobs:
 
     steps:
       - name: Checkout this repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           lfs: true
 
       - name: Checkout actions repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           repository: Exabyte-io/actions
           token: ${{ secrets.BOT_GITHUB_TOKEN }}

src/components/SquareIconButton.tsx

@@ -1,6 +1,6 @@
 import IconButton, { IconButtonProps } from "@mui/material/IconButton";
 import Tooltip, { TooltipProps } from "@mui/material/Tooltip";
-import React, { useState } from "react";
+import React from "react";
 import _ from "underscore";
 
 interface SquareIconButtonProps extends IconButtonProps {

src/mixins/atoms.js

@@ -88,13 +88,15 @@ export const AtomsMixin = (superclass) =>
         createAtomsGroup(basis, atomRadiiScale) {
             const atomsGroup = new THREE.Group();
             atomsGroup.name = ATOM_GROUP_NAME;
+            const { elementsWithLabelsArray } = basis;
             basis.coordinates.forEach((atomicCoordinate, atomicIndex) => {
                 const element = basis.getElementByIndex(atomicIndex);
                 const sphereMesh = this.getSphereMeshObject({
                     ...this._getDefaultSettingsForElement(element, atomRadiiScale),
                     coordinate: atomicCoordinate.value,
                 });
                 sphereMesh.name = `${element}-${atomicIndex}`;
+                sphereMesh.nameWithLabel = `${elementsWithLabelsArray[atomicIndex]}`;
                 atomsGroup.add(sphereMesh);
             });
             return atomsGroup;

src/mixins/bonds.js

@@ -1,8 +1,8 @@
-import { Made } from "@mat3ra/made";
 import {
     filterBondsDataByElementsAndOrder,
     getElementsBondsData,
 } from "@exabyte-io/periodic-table.js";
+import { Made } from "@mat3ra/made";
 import createKDTree from "static-kdtree";
 import * as THREE from "three";
 

src/mixins/labels.js

@@ -111,7 +111,7 @@ export const LabelsMixin = (superclass) =>
 
                 group.children.forEach((atom) => {
                     if (atom instanceof THREE.Mesh) {
-                        const text = atom.name.split("-")[0];
+                        const text = atom.nameWithLabel;
                         const position = new THREE.Vector3().setFromMatrixPosition(
                             atom.matrixWorld,
                         );