X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/f06094d87f1c1b1bb8e886dd723bcdf17f0b727d..17963753e57340121942857300c41c7852275c4b:/src/views-components/data-explorer/renderers.tsx

diff --git a/src/views-components/data-explorer/renderers.tsx b/src/views-components/data-explorer/renderers.tsx
index cc311248cb..32e14c5a08 100644
--- a/src/views-components/data-explorer/renderers.tsx
+++ b/src/views-components/data-explorer/renderers.tsx
@@ -235,17 +235,19 @@ const clusterColors = [
 
 export const ResourceCluster = (props: { uuid: string }) => {
     const CLUSTER_ID_LENGTH = 5;
-    const pos = props.uuid.indexOf('-');
+    const pos = props.uuid.length > CLUSTER_ID_LENGTH ? props.uuid.indexOf('-') : 5;
     const clusterId = pos >= CLUSTER_ID_LENGTH ? props.uuid.substr(0, pos) : '';
-    const ci = pos >= CLUSTER_ID_LENGTH ? (props.uuid.charCodeAt(0) + props.uuid.charCodeAt(1)) % clusterColors.length : 0;
-    return <Typography>
-        <span style={{
-            backgroundColor: clusterColors[ci][0],
-            color: clusterColors[ci][1],
-            padding: "2px 7px",
-            borderRadius: 3
-        }}>{clusterId}</span>
-    </Typography>;
+    const ci = pos >= CLUSTER_ID_LENGTH ? (((((
+        (props.uuid.charCodeAt(0) * props.uuid.charCodeAt(1))
+        + props.uuid.charCodeAt(2))
+        * props.uuid.charCodeAt(3))
+        + props.uuid.charCodeAt(4))) % clusterColors.length) : 0;
+    return <span style={{
+        backgroundColor: clusterColors[ci][0],
+        color: clusterColors[ci][1],
+        padding: "2px 7px",
+        borderRadius: 3
+    }}>{clusterId}</span>;
 };
 
 export const ComputeNodeInfo = withResourceData('info', renderNodeInfo);