Errors running: npm run server on MacOS 13.4

[dbl001]

$ npm --version
9.7.1

% npm run serve  

> attention-viz@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 9234ms                               11:24:06 AM

  App running at:
  - Local:   http://localhost:8561 
  - Network: http://192.168.116.66:8561

  Note that the development build is not optimized.
  To create a production build, run npm run build.

ERROR in src/components/Projection/archived/ScatterPlot.vue:143:33
TS2345: Argument of type 'TokenCoordinate[]' is not assignable to parameter of type 'TokenData[]'.
  Type 'TokenCoordinate' is missing the following properties from type 'TokenData': position, pos_int, length, sentence, and 5 more.
    141 |         onMounted(() => {
    142 |             // drawCanvas(props.data.tokens);
  > 143 |             drawCanvasScatterGL(props.data.tokens);
        |                                 ^^^^^^^^^^^^^^^^^
    144 |         });
    145 |
    146 |         return {

ERROR in src/components/Projection/archived/SingleView/SingleView.vue:97:38
TS2352: Conversion of type '{ points: never[]; headings: never[]; range: { x: [number, number]; y: [number, number]; }; }' to type 'Projection' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Property 'unique' is missing in type '{ points: never[]; headings: never[]; range: { x: [number, number]; y: [number, number]; }; }' but required in type 'Projection'.
     95 |         });
     96 |
  >  97 |         var shallowData = shallowRef({
        |                                      ^
  >  98 |             points: [],
        | ^^^^^^^^^^^^^^^^^^^^^^^
  >  99 |             headings: [],
        | ^^^^^^^^^^^^^^^^^^^^^^^
  > 100 |             range: {
        | ^^^^^^^^^^^^^^^^^^^^^^^
  > 101 |                 x: [0, 0],
        | ^^^^^^^^^^^^^^^^^^^^^^^
  > 102 |                 y: [0, 0],
        | ^^^^^^^^^^^^^^^^^^^^^^^
  > 103 |             },
        | ^^^^^^^^^^^^^^^^^^^^^^^
  > 104 |         } as Typing.Projection);
        | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    105 |
    106 |         var deckgl = {} as Deck;
    107 |

ERROR in src/components/Projection/archived/SingleView/SingleView.vue:136:34
TS2678: Type '"type"' is not comparable to type 'keyof PointColor'.
    134 |                     const getColor = (d: Typing.Point) => {
    135 |                         switch (state.colorBy) {
  > 136 |                             case 'type':
        |                                  ^^^^^^
    137 |                                 return d.color.type
    138 |                             case 'position':
    139 |                                 return d.color.position

ERROR in src/components/Projection/archived/SingleView/SingleView.vue:137:48
TS2339: Property 'type' does not exist on type 'PointColor'.
    135 |                         switch (state.colorBy) {
    136 |                             case 'type':
  > 137 |                                 return d.color.type
        |                                                ^^^^
    138 |                             case 'position':
    139 |                                 return d.color.position
    140 |                             case 'categorical':

ERROR in src/components/Projection/archived/SingleView/SingleView.vue:140:34
TS2678: Type '"categorical"' is not comparable to type 'keyof PointColor'.
    138 |                             case 'position':
    139 |                                 return d.color.position
  > 140 |                             case 'categorical':
        |                                  ^^^^^^^^^^^^^
    141 |                                 return d.color.categorical
    142 |                             case 'norm':
    143 |                                 return d.color.norm

ERROR in src/components/Projection/archived/SingleView/SingleView.vue:141:48
TS2339: Property 'categorical' does not exist on type 'PointColor'.
    139 |                                 return d.color.position
    140 |                             case 'categorical':
  > 141 |                                 return d.color.categorical
        |                                                ^^^^^^^^^^^
    142 |                             case 'norm':
    143 |                                 return d.color.norm
    144 |                             default:

ERROR in src/components/Projection/archived/SingleView/SingleView.vue:142:34
TS2678: Type '"norm"' is not comparable to type 'keyof PointColor'.
    140 |                             case 'categorical':
    141 |                                 return d.color.categorical
  > 142 |                             case 'norm':
        |                                  ^^^^^^
    143 |                                 return d.color.norm
    144 |                             default:
    145 |                                 throw Error('invalid color channel')

ERROR in src/components/Projection/archived/SingleView/SingleView.vue:143:48
TS2339: Property 'norm' does not exist on type 'PointColor'.
    141 |                                 return d.color.categorical
    142 |                             case 'norm':
  > 143 |                                 return d.color.norm
        |                                                ^^^^
    144 |                             default:
    145 |                                 throw Error('invalid color channel')
    146 |                         }

ERROR in src/components/Projection/archived/SingleView/SingleView.vue:303:17
TS2322: Type '(d: Typing.PlotHead) => [string, string]' is not assignable to type '((d: PlotHead) => [string, string]) & AccessorFunction<any, string>'.
  Type '(d: Typing.PlotHead) => [string, string]' is not assignable to type 'AccessorFunction<any, string>'.
    Type '[string, string]' is not assignable to type 'string'.
    301 |                 pickable: false,
    302 |                 getPosition: (d: Typing.PlotHead) => d.coordinate,
  > 303 |                 getText: (d: Typing.PlotHead) => d.title,
        |                 ^^^^^^^
    304 |                 getSize: state.zoom >= 1 ? 24 : 20,
    305 |                 getAngle: 0,
    306 |                 getColor: state.userTheme == 'light-theme' ? [0, 0, 0] : [255, 255, 255],

ERROR in src/components/Projection/archived/SingleView/SingleView.vue:353:34
TS2678: Type '"type"' is not comparable to type 'keyof PointColor'.
    351 |                     const getMsg = (d: Typing.Point) => {
    352 |                         switch (state.colorBy) {
  > 353 |                             case 'type':
        |                                  ^^^^^^
    354 |                             case 'position':
    355 |                                 return d.msg.position
    356 |                             case 'categorical':

ERROR in src/components/Projection/archived/SingleView/SingleView.vue:356:34
TS2678: Type '"categorical"' is not comparable to type 'keyof PointColor'.
    354 |                             case 'position':
    355 |                                 return d.msg.position
  > 356 |                             case 'categorical':
        |                                  ^^^^^^^^^^^^^
    357 |                                 return d.msg.categorical
    358 |                             case 'norm':
    359 |                                 return d.msg.norm

ERROR in src/components/Projection/archived/SingleView/SingleView.vue:358:34
TS2678: Type '"norm"' is not comparable to type 'keyof PointColor'.
    356 |                             case 'categorical':
    357 |                                 return d.msg.categorical
  > 358 |                             case 'norm':
        |                                  ^^^^^^
    359 |                                 return d.msg.norm
    360 |                             default:
    361 |                                 throw Error('invalid msg channel')

Also, I had to add:

        tsne_x: number;
        tsne_y: number;

to export interface TokenData in: ../front/src/utils/typing.ts

 export interface TokenData { // shared by all heads and layers
        position: number;
        pos_int: number;
        length: number;
        sentence: string;
        type: string;
        value: string;
        imagePath: string;
        originalPatchPath: string;
        originalImagePath: string;
        tsne_x: number;
        tsne_y: number;

[catherinesyeh]

Hi @dbl001, sorry about that! Actually all of these errors are coming from archived components in the src/components/Projection/archived/ folder (none of which are necessary to make the system run). You shouldn't need to make any changes to the existing code to run AttentionViz with the sample datasets. But thank you for bringing this to my attention and I will delete the archived folder to prevent further confusion!