Nitro UI

Circular Viewer

Mini Viewer

ATGCAATGCAATGCAATGCAATGCAATGCAATGCAATGCAATGCAATGCA;exampleAnnotation50 bp
import {
  Annotation,
  AriadneSelection,
  CircularViewer,
} from "@ninjha01/nitro-ui";

export const MiniCircularViewer = () => {
  const [selection, setSelection] = useState<AriadneSelection | null>(null);
  const annotations: Annotation[] = [
    {
      text: "example",
      type: "CDS",
      direction: "forward",
      start: 0,
      end: 10,
      className: "text-blue-500 fill-blue-500",
    },
  ];
  return (
    <CircularViewer
      containerClassName="text-brand-400"
      sequence={"ATGCA".repeat(10)}
      annotations={annotations}
      selection={selection}
      setSelection={setSelection}
    />
  );
};

Full Viewer

062124186248310372434;exampleAnnotation500 bp
| 0
A
| 1
T
| 2
G
| 3
C
| 4
A
| 5
T
| 6
G
| 7
C
| 8
A
| 9
T
| 10
G
| 11
C
| 12
A
| 13
T
| 14
G
| 15
C
| 16
A
| 17
T
| 18
G
| 19
C
| 20
A
| 21
T
| 22
G
| 23
C
| 24
A
| 25
T
| 26
G
| 27
C
| 28
A
| 29
T
| 30
G
| 31
C
| 32
A
| 33
T
| 34
G
| 35
C
| 36
A
| 37
T
| 38
G
| 39
C
| 40
A
| 41
T
| 42
G
| 43
C
| 44
A
| 45
T
| 46
G
| 47
C
| 48
A
| 49
T
| 50
G
| 51
C
| 52
A
| 53
T
| 54
G
| 55
C
| 56
A
| 57
T
| 58
G
| 59
C
| 60
A
| 61
T
| 62
G
| 63
C
| 64
A
| 65
T
| 66
G
| 67
C
| 68
A
| 69
T
| 70
G
| 71
C
| 72
A
| 73
T
| 74
G
| 75
C
| 76
A
| 77
T
| 78
G
| 79
C
| 80
A
| 81
T
| 82
G
| 83
C
| 84
A
| 85
T
| 86
G
| 87
C
| 88
A
| 89
T
| 90
G
| 91
C
| 92
A
| 93
T
| 94
G
| 95
C
| 96
A
| 97
T
| 98
G
| 99
C
| 100
A
| 101
T
| 102
G
| 103
C
| 104
A
| 105
T
| 106
G
| 107
C
| 108
A
| 109
T
| 110
G
| 111
C
| 112
A
| 113
T
| 114
G
| 115
C
| 116
A
| 117
T
| 118
G
| 119
C
| 120
A
| 121
T
| 122
G
| 123
C
| 124
A
| 125
T
| 126
G
| 127
C
| 128
A
| 129
T
| 130
G
| 131
C
| 132
A
| 133
T
| 134
G
| 135
C
| 136
A
| 137
T
| 138
G
| 139
C
| 140
A
| 141
T
| 142
G
| 143
C
| 144
A
| 145
T
| 146
G
| 147
C
| 148
A
| 149
T
| 150
G
| 151
C
| 152
A
| 153
T
| 154
G
| 155
C
| 156
A
| 157
T
| 158
G
| 159
C
| 160
A
| 161
T
| 162
G
| 163
C
| 164
A
| 165
T
| 166
G
| 167
C
| 168
A
| 169
T
| 170
G
| 171
C
| 172
A
| 173
T
| 174
G
| 175
C
| 176
A
| 177
T
| 178
G
| 179
C
| 180
A
| 181
T
| 182
G
| 183
C
| 184
A
| 185
T
| 186
G
| 187
C
| 188
A
| 189
T
| 190
G
| 191
C
| 192
A
| 193
T
| 194
G
| 195
C
| 196
A
| 197
T
| 198
G
| 199
C
import {
  Annotation,
  AriadneSelection,
  CircularViewer,
} from "@ninjha01/nitro-ui";

export const FullCircularViewer = () => {
  const [selection, setSelection] = useState(null);
  const annotations: Annotation[] = [
    {
      text: "example",
      type: "CDS",
      direction: "forward",
      start: 0,
      end: 30,
      className: "text-blue-500 fill-blue-500",
    },
  ];
  return (
    <CircularViewer
      containerClassName="text-brand-400"
      sequence={"ATGCA".repeat(100)}
      annotations={annotations}
      selection={selection}
      setSelection={setSelection}
    />
  );
};

Was this page helpful?