Skip to content

Commit f0518d9

Browse files
demartscdemartsc
authored
Merge pull request #10 from demartsc/feat/setClickThrough
feat: update pass through mode to setClickThroughAsync
2 parents 89470e6 + b3e11c5 commit f0518d9

File tree

8 files changed

+12821
-7376
lines changed

8 files changed

+12821
-7376
lines changed

‎src/Extension.js‎

Lines changed: 28 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Copyright (c) 2019 Chris DeMartini
1+
// Copyright (c) 2019, 2021 Chris DeMartini
22
//
33
// Permission is hereby granted, free of charge, to any person obtaining a copy
44
// of this software and associated documentation files (the "Software"), to deal
@@ -59,8 +59,11 @@ class App extends Component {
5959
// remove annotation from array
6060
const annotationToDelete = this.state.config.tableauExt.settings.get('annotationToDelete');
6161
const annotationArray = JSON.parse(this.state.config.tableauExt.settings.get('annotationData'));
62-
const newAnnotationArray = _.filter(annotationArray,(o) => { console.log('checking object', o.id, annotationToDelete); return o.id !== annotationToDelete });
63-
console.log('we are deleting an annotation', annotationToDelete, newAnnotationArray);
62+
const newAnnotationArray = _.filter(annotationArray,(o) => {
63+
// console.log('checking object', o.id, annotationToDelete);
64+
return o.id !== annotationToDelete
65+
});
66+
// console.log('we are deleting an annotation', annotationToDelete, newAnnotationArray);
6467

6568
// set new array back to settings
6669
this.state.config.tableauExt.settings.set('annotationData',JSON.stringify(newAnnotationArray));
@@ -73,53 +76,27 @@ class App extends Component {
7376

7477
configure = () => {
7578
// this will bring up the viz
79+
this.state.config.tableauExt.settings.set('annotationShowControls', 'yes');
7680
if ( this.state.config.tableauExt.settings.get('configState') === "true" ) {
7781
this.state.config.tableauExt.settings.set('configState', 'false');
7882
// if we are in pass through mode we need to revert if configured
7983
// this is really our only escape from pass through mode
80-
if ( this.state.config.tableauExt.settings.get('annotationPassThroughMode') === "yes" ) {
81-
const extensionParent = window.parent;
82-
const extensionZoneId = window.name.substring(window.name.lastIndexOf("_")+1)
83-
const extensionParentDiv = extensionParent.document.getElementById(`tabZoneId${extensionZoneId}`);
84-
extensionParentDiv.style.pointerEvents = "auto";
85-
window.document.body.style.pointerEvents = "auto";
86-
this.state.config.tableauExt.settings.set('annotationPassThroughMode', 'no');
87-
}
88-
this.state.config.tableauExt.settings.set('annotationPassThroughMode', 'no');
89-
this.state.config.tableauExt.settings.set('annotationShowControls', 'yes');
9084
this.state.config.tableauExt.settings.saveAsync().then(()=>{
91-
this.props.history.push('/')
92-
});
85+
if ( this.state.config.tableauExt.settings.get('annotationPassThroughMode') === "yes" ) {
86+
this.state.config.tableauExt.setClickThroughAsync(false).then(() => {
87+
this.state.config.tableauExt.settings.set('annotationPassThroughMode', 'no');
88+
this.state.config.tableauExt.settings.saveAsync().then(()=>{
89+
this.props.history.push('/')
90+
});
91+
});
92+
}
93+
});
9394
} else {
9495
this.state.config.tableauExt.settings.set('configState', 'true');
9596
this.state.config.tableauExt.settings.saveAsync().then(()=>{
9697
this.props.history.push('/viz')
9798
});
9899
}
99-
100-
// may be better to render a config box so that it will display if user clicks config
101-
102-
// const popUpUrl = window.location.origin + process.env.PUBLIC_URL + '#/configure';
103-
// const popUpOptions = {
104-
// height: 625,
105-
// width: 790,
106-
// };
107-
108-
// tableauExt.ui.displayDialogAsync(popUpUrl, "", popUpOptions).then((closePayload) => {
109-
// if (closePayload === 'false') {
110-
// this.props.history.push('/viz')
111-
// }
112-
// }).catch((error) => {
113-
// // One expected error condition is when the popup is closed by the user (meaning the user
114-
// // clicks the 'X' in the top right of the dialog). This can be checked for like so:
115-
// switch(error.errorCode) {
116-
// case window.tableau.ErrorCodes.DialogClosedByUser:
117-
// // log("closed by user")
118-
// break;
119-
// default:
120-
// console.error(error.message);
121-
// }
122-
// });
123100
};
124101

125102
updateTableauSettings = (newSettings) => {
@@ -145,17 +122,17 @@ class App extends Component {
145122
extensionReady: true
146123
})
147124
if ( this.state.config.tableauExt.settings.get('configState') === 'true' ) {
148-
console.log('we are mounting now', this.state.config.tableauExt.settings.get('configState'));
125+
// console.log('we are mounting now', this.state.config.tableauExt.settings.get('configState'));
149126
this.props.history.push('/viz');
150127
}
151128
}, (err) => {
152129
// Something went wrong in initialization
153-
console.log('Error while Initializing: ' + err.toString());
130+
// console.log('Error while Initializing: ' + err.toString());
154131
});
155132
}
156133

157134
render() {
158-
console.log('checking state', this.state);
135+
// console.log('checking state', this.state);
159136
return (
160137
<div className="App">
161138
{
@@ -179,6 +156,15 @@ class App extends Component {
179156
saveAsync={true}
180157
/>}
181158
/>
159+
<Route exact path="/crudConfig" render={(props) =>
160+
<Configuration
161+
extensionIcons={this.props.extensionIcons}
162+
colors={this.props.colors}
163+
stepperConfig={this.props.crudConfig}
164+
tableauExt={tableauExt}
165+
saveAsync={true}
166+
/>}
167+
/>
182168
<Route exact path="/deleteAnnotation" render={(props) =>
183169
<DeleteAnnotation
184170
onClick={this.deleteAnnotation}

‎src/extension_assets/CustomLayout.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -286,7 +286,7 @@ const CustomLayout = props => {
286286
extensionContext.tableauExt.settings.set('annotationSubjectBadgeText', "");
287287

288288
if ( extensionContext.tableauExt.settings.get('configNewAnnotation') === "true" ) {
289-
console.log('checking configNewAnnotation', extensionContext.tableauExt.settings.get('configNewAnnotation'), extensionContext.tableauExt.settings.get('configNewAnnotation') === "true");
289+
// console.log('checking configNewAnnotation', extensionContext.tableauExt.settings.get('configNewAnnotation'), extensionContext.tableauExt.settings.get('configNewAnnotation') === "true");
290290
// new annotation, revert descriptions
291291
extensionContext.tableauExt.settings.set('annotationNoteTitle', "A New Annotation!");
292292
extensionContext.tableauExt.settings.set('annotationNoteLabel', "You should update this with the content you want. Click my pencil to edit me!");
@@ -295,12 +295,12 @@ const CustomLayout = props => {
295295
extensionContext.tableauExt.settings.saveAsync().then(() => {
296296
setAnnotationType(value)
297297
props.onOptionSelected('annotationType', value);
298-
console.log('annotationType', annotationType, value, extensionContext.tableauExt.settings.getAll());
298+
// console.log('annotationType', annotationType, value, extensionContext.tableauExt.settings.getAll());
299299
});
300300
}
301301

302302
useEffect(() => {
303-
console.log('checking effect', props);
303+
// console.log('checking effect', props);
304304
if (annotationType === "") {
305305
props.enableNext(false)
306306
} else {
@@ -309,7 +309,7 @@ const CustomLayout = props => {
309309
}, [annotationType]);
310310

311311
const Annotation = Annotations[annotationType];
312-
console.log('checking annotation in custom', annotationType, Annotations, Annotation);
312+
// console.log('checking annotation in custom', annotationType, Annotations, Annotation);
313313
return (
314314
<div style={layoutStyle}>
315315
<h1>Select an Annotation Type</h1>

‎src/extension_assets/annotationConfig.js‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -399,33 +399,6 @@ export default {
399399
},
400400
]
401401
},
402-
{
403-
"name": "Configuration",
404-
"inputs": [
405-
{
406-
"type": "dropdown",
407-
"label": "Show Controls?",
408-
"value": "yes",
409-
"name": "annotationShowControls",
410-
"tooltip": "Toggle whether to show the icon controls for CRUD operations.",
411-
"values": [
412-
{"value": "yes", "text": "Yes"},
413-
{"value": "no", "text": "No"}
414-
]
415-
},
416-
{
417-
"type": "dropdown",
418-
"label": "Click Through Mode (Caution!)",
419-
"value": "no",
420-
"name": "annotationPassThroughMode",
421-
"tooltip": "Proceed with Caution! This will cause our extension to error if not deployed directly to your Tableau Server! It will toggle whether to allow the extension to try and effect parent dom elements of extension.",
422-
"values": [
423-
{"value": "no", "text": "No"},
424-
{"value": "yes", "text": "Yes"}
425-
]
426-
}
427-
]
428-
},
429402
],
430403
"overwrites": {}
431404
}

‎src/extension_assets/crudConfig.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
// Copyright (c) 2021 Chris DeMartini
2+
//
3+
// Permission is hereby granted, free of charge, to any person obtaining a copy
4+
// of this software and associated documentation files (the "Software"), to deal
5+
// in the Software without restriction, including without limitation the rights
6+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
// copies of the Software, and to permit persons to whom the Software is
8+
// furnished to do so, subject to the following conditions:
9+
//
10+
// The above copyright notice and this permission notice shall be included in
11+
// all copies or substantial portions of the Software.
12+
//
13+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19+
// THE SOFTWARE.
20+
21+
export default {
22+
"config": {
23+
"steps": [
24+
{
25+
"name": "Extension Configuration",
26+
"title": "Configuration Options",
27+
"type": "viz_options",
28+
"groups": [
29+
{
30+
"name": "Configuration",
31+
"inputs": [
32+
{
33+
"type": "dropdown",
34+
"label": "Show Controls?",
35+
"value": "yes",
36+
"name": "annotationShowControls",
37+
"tooltip": "Toggle whether to show the icon controls for CRUD operations. The only way to re-enable them is to re-configure the extension.",
38+
"values": [
39+
{"value": "yes", "text": "Yes"},
40+
{"value": "no", "text": "No"}
41+
]
42+
},
43+
{
44+
"type": "dropdown",
45+
"label": "Click Through Mode (Caution!)",
46+
"value": "no",
47+
"name": "annotationPassThroughMode",
48+
"tooltip": "Proceed with Caution! This will cause our extension to be completely pass through to mouse/keyboard interactions. NOTE: the only way to re-enable interaction is to re-configure the extension.",
49+
"values": [
50+
{"value": "no", "text": "No"},
51+
{"value": "yes", "text": "Yes"}
52+
]
53+
}
54+
]
55+
},
56+
],
57+
"overwrites": {}
58+
}
59+
]
60+
}
61+
}

‎src/extension_assets/splash/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Copyright (c) 2019 Chris DeMartini
1+
// Copyright (c) 2019, 2021 Chris DeMartini
22
//
33
// Permission is hereby granted, free of charge, to any person obtaining a copy
44
// of this software and associated documentation files (the "Software"), to deal
@@ -60,14 +60,14 @@ const SplashStyle = {
6060

6161
const CustomSplash = (props) => (
6262
<div className="Splash" style={SplashStyle}>
63-
<h1>Annotate All The (Tableau) Things!</h1>
63+
<h1>Let's Annotate!</h1>
6464
<h4>React-Annotation within Tableau</h4>
6565
<p>Leverage the brilliance of Susie Lu's React-Annotation library, directly within (or on top of) Tableau!</p>
6666

6767

6868
{/* Config button. It should have the `onClick={props.onClick}` property and a `value` parameter as well */}
6969
<ButtonInput
70-
value="Let's Annotate Things!"
70+
value="Let's Annotate!"
7171
onClick={props.onClick}
7272
style={buttonStyle}
7373
/>

0 commit comments

Comments
 (0)