querySymbol.tsx 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. import styled from '@emotion/styled';
  2. import {space} from 'sentry/styles/space';
  3. import {useDDMContext} from 'sentry/views/ddm/context';
  4. const indexToChar = 'abcdefghijklmnopqrstuvwxyz';
  5. export const getQuerySymbol = (index: number) => {
  6. let result = '';
  7. let i = index;
  8. do {
  9. result = indexToChar[i % indexToChar.length] + result;
  10. i = Math.floor(i / indexToChar.length) - 1;
  11. } while (i >= 0);
  12. return result;
  13. };
  14. const Symbol = styled('div')<{isSelected: boolean}>`
  15. display: flex;
  16. width: 16px;
  17. height: 16px;
  18. line-height: 16px;
  19. padding: ${space(0.5)};
  20. justify-content: center;
  21. align-items: center;
  22. flex-shrink: 0;
  23. border-radius: 50%;
  24. font-weight: 500;
  25. color: ${p => p.theme.black};
  26. font-size: 11px;
  27. background: ${p => p.theme.yellow300};
  28. ${p =>
  29. p.isSelected &&
  30. `
  31. background: ${p.theme.purple300};
  32. color: ${p.theme.white};
  33. `}
  34. `;
  35. export function QuerySymbol({
  36. queryId,
  37. isSelected,
  38. ...props
  39. }: React.ComponentProps<typeof Symbol> & {isSelected: boolean; queryId: number}) {
  40. const {showQuerySymbols, isMultiChartMode} = useDDMContext();
  41. if (!showQuerySymbols || queryId < 0) {
  42. return null;
  43. }
  44. return (
  45. <Symbol isSelected={isMultiChartMode && isSelected} {...props}>
  46. <span>{getQuerySymbol(queryId)}</span>
  47. </Symbol>
  48. );
  49. }